如何捕获在 actionscript 和 flex 中动态创建的 textinput 值？答案

【问题标题】：how to capture the textinput value created dynamically in actionscript and flex?如何捕获在 actionscript 和 flex 中动态创建的 textinput 值？
【发布时间】：2012-05-24 08:11:31
【问题描述】：

我已经使用 actionscript 动态创建了 textinput，但是当我从前端输入输入值并将其保存到 db（文件）中时，它只显示在 db 中输入的最后一个值。请帮忙

 for(var i:int=0;i<5;i++){
        var txt1:TextInput=new TextInput();
    txt1.width=88;
    createtxtinput(txt1);
    txt1.addEventListener(Event.CHANGE,test123(i,txt1))

var txt2:TextInput=new TextInput();
    txt2.width=88;
    createtxtinput(txt2);
    txt2.addEventListener(Event.CHANGE,test123(i,txt2))
  }

public function test123(x:int,txtmaterial:TextInput){
    return function(event){
    //  
        setValuestable2multi(x,txtmaterial.text);
//  Alert.show(x.toString());
    }

}

【问题讨论】：

为什么要动态添加 TextInputs？只需使用带有 TextInput 的 ItemRenderer 的 List 或 DataGroup。
我想将数据从 textinput 保存到数据库中
也许你应该扩展 TextInput 类并覆盖 set text(str:String):void {... ，然后添加 dispatchEvent ？

标签： actionscript-3 apache-flex

【解决方案1】：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               creationComplete="_creationCompleteHandler(event)">

    <s:layout>
        <s:VerticalLayout />
    </s:layout>

    <fx:Script>
        <![CDATA[
        import flash.events.FocusEvent;
        import mx.events.FlexEvent;
        import spark.components.TextInput;
        import spark.events.TextOperationEvent;

        //---------------------------------------------------------------------
        //
        //  constants
        //
        //---------------------------------------------------------------------
        /**
         * @private
         * TextInput instances id prefix
         */
        private const TEXT_INPUT_ID_PREFIX:String = "textInput";

        //---------------------------------------------------------------------
        //
        //  private methods
        //
        //---------------------------------------------------------------------
        /**
         * @private
         * 
         * Create TextInput instances
         */
        private function _createTextInputs():void
        {
            var count:uint = 5;
            var textInput:TextInput;
            for (var i:uint; i < count; i++)
            {
                textInput = new TextInput();
                textInput.id = TEXT_INPUT_ID_PREFIX + i.toString();

                // listen TextOperationEvent.CHANGE event
                textInput.addEventListener(TextOperationEvent.CHANGE, _textInput_changeHandler);

                // or listen FocusEvent.FOCUS_OUT

                //textInput.addEventListener(FocusEvent.FOCUS_OUT, _textInput_focusOutHandler);
                addElement(textInput);
            }
        }

        /**
         * @private
         * 
         * Get TextInput instance index and value and pass in this values to "saving to database" method
         * 
         * @param   textInput TextInput instance
         */
        private function _handleChangesInTextInput(textInput:TextInput):void
        {
            var textInputIndex:int = parseInt(textInput.id.replace(TEXT_INPUT_ID_PREFIX, ""), 10);
            var textInputValue:String = textInput.text;

            _saveTextInputDataToDatabase(textInputIndex, textInputValue);
        }

        /**
         * @private
         * 
         * Mockup method for saving to database
         * 
         * @param   textInputIndex TextInput instance index
         * @param   textInputValue TextInput instace value
         */
        private function _saveTextInputDataToDatabase(textInputIndex:int, textInputValue:String):void
        {
            //TODO save data to database
        }

        //---------------------------------------------------------------------
        //
        //  handlers
        //
        //---------------------------------------------------------------------
        /**
         * @private
         * 
         * Application FlexEvent.CREATION_COMPLETE handler
         * 
         * @param   event
         */
        private function _creationCompleteHandler(event:FlexEvent):void
        {
            _createTextInputs();
        }

        /**
         * @private
         * 
         * TextInput instances TextOperationEvent.CHANGE handler
         * 
         * @param   event
         */
        private function _textInput_changeHandler(event:TextOperationEvent):void
        {
            _handleChangesInTextInput(TextInput(event.target));
        }

        /**
         * @private
         * 
         * TextInput instances FocusEvent.FOCUS_OUT handler
         * 
         * @param   event
         */
        private function _textInput_focusOutHandler(event:FocusEvent):void
        {
            _handleChangesInTextInput(TextInput(event.currentTarget));
        }
        ]]>
    </fx:Script>    
</s:Application>

如果您要监听TextOperationEvent.CHANGE 事件，那么任何按键（当TextInput 具有输入焦点时）都会导致_handleChangesInTextInput 方法被调用。

如果你会监听FocusEvent.FOCUS_OUT 事件，那么在某些TextInput 失去输入焦点后将调用_handleChangesInTextInput 方法。

【讨论】：