如何在Flex中读取动态表单子数据？

Question

我通过在动作脚本中添加每个组件来动态创建一个表单， 现在我想取回动态输入到每个组件中的文本/数据？

private function loadAllComponents():void
        {   
            var formItemArray:Array = new Array();   

            for(var i:int=0; i< Application.application.designList.length; i++)//which had the colonName, colComponet to be dispalyed,
            {
                var fm:FormItem = new FormItem();

                fm.label = Application.application.designList.getItemAt(i).colName;

                var comp:String = Application.application.designList.getItemAt(i).component;

                switch(comp)
                {
                    case "TextBox":
                        var ti:TextInput = new TextInput();
                        ti.id = Application.application.designList.getItemAt(i).component;
                        fm.addChild(ti);
                    break;

                    case "TextArea":
                        var ta:TextArea = new TextArea();
                        ta.id = Application.application.designList.getItemAt(i).colName;
                        fm.addChild(ta);                        
                    break;

                    case "ComboBox":

                        var mycb:myComboBox = new myComboBox();                                                     
                        mycb.getAllMasterCBData(Application.application.selectedgridItem, Application.application.designList.getItemAt(i).colName);                                                     
                        fm.addChild(mycb);

                    break;

                    case "DateField":
                        var df:DateField = new DateField();
                        df.id = Application.application.designList.getItemAt(i).component;
                        fm.addChild(df);
                    break;
                }
                myform.addChild(fm);                
            }

        }

    private function saveToDb():void // Here i wan to read all the formdata
    {               
        var formItems:Array = myform.getChildren();

        for each (var item:UIComponent in formItems)
        {   
            if (item is TextInput)
            {         
                var text:String = Object(item).text;    

                Alert.show("came here");      
            }
            else if (item is DateField)
            {
                var date:Date = DateField(item).selectedDate;                                   
            }
        }
    }

    ]]>
</mx:Script>

<mx:Form id="myform" cornerRadius="5" borderColor="#B7BABC" borderStyle="solid" width="100%" height="100%" />

<mx:HBox width="100%" height="100%" >
    <mx:Spacer width="120"/>
    <mx:Button label=" Save " id="saveBtn"  click="saveToDb()" />       
</mx:HBox>  

Answer 1

您正在 ActionScript 中创建输入组件，但基于此代码，您不是动态创建它们；而是基于此代码。你只是对它们进行硬编码。通过给定的示例，您将了解在编译时创建的组件。

您需要存储对您创建的表单项的引用；使它们成为公共变量而不是“var”局部变量。有点像这样：

protected var ti:TextInput ;       
protected var ta:TextArea ;        
protected var df:DateField;

然后在您的创建方法中，执行如下操作：

ti = new TextInput();       
ti.id = Application.application.designList.getItemAt(i).component;
fm.addChild(ti);

ta  = new TextArea();        
ta.id = Application.application.designList.getItemAt(i).colName;
fm.addChild(ta);    

df = new DateField();
df.id = Application.application.designList.getItemAt(i).component;
fm.addChild(df);

myform.addChild(fm); 

然后，当您需要访问它们时，只需执行如下操作：

private function getMyformData()
{
       ti.text;
       ta.text;
}

如果您在运行时基于数据生成表单组件，则存储表单元素在某种数组中。

您还可以通过循环容器的所有子项来解决问题，尽管这不是我的第一种方法。

---

由于海报发布了更完整的代码；以下是一些补充。我在每个“switch”块中添加了所有表单项的受保护数组；新的输入元素被推入数组。

<mx:Script>
protected var itemsArray : Array = new Array();
private function loadAllComponents():void
    {   
        var formItemArray:Array = new Array();   

        for(var i:int=0; i< Application.application.designList.length; i++)//which had the colonName, colComponet to be dispalyed,
        {
            var fm:FormItem = new FormItem();

            fm.label = Application.application.designList.getItemAt(i).colName;

            var comp:String = Application.application.designList.getItemAt(i).component;

            switch(comp)
            {
                case "TextBox":
                    var ti:TextInput = new TextInput();
                    ti.id = Application.application.designList.getItemAt(i).component;
                    fm.addChild(ti);
                    itemsArray.push(ti)
                break;

                case "TextArea":
                    var ta:TextArea = new TextArea();
                    ta.id = Application.application.designList.getItemAt(i).colName;
                    fm.addChild(ta);                        
                    itemsArray.push(ta)
                break;

                case "ComboBox":

                    var mycb:myComboBox = new myComboBox();                                                     
                    mycb.getAllMasterCBData(Application.application.selectedgridItem, Application.application.designList.getItemAt(i).colName);                                                     
                    fm.addChild(mycb);
                    itemsArray.push(mycb)

                break;

                case "DateField":
                    var df:DateField = new DateField();
                    df.id = Application.application.designList.getItemAt(i).component;
                    fm.addChild(df);
                    itemsArray.push(df)
                break;
            }
            myform.addChild(fm);                
        }

    }

sateToDb 方法将更改为如下所示：

private function saveToDb():void // Here i wan to read all the formdata
{               
    var formItems:Array = myform.getChildren();

    for each (var item:UIComponent in itemsArray )
    {   
        if (item is TextInput)
        {         
            var text:String = Object(item).text;    

            Alert.show("came here");      
        }
        else if (item is DateField)
        {
            var date:Date = DateField(item).selectedDate;                                   
        }
    }
}

    ]]>
</mx:Script>

Answer 2

编辑后的回复：

好的，我想我明白了这个问题。

您将数据控件添加到 FormItems 并将它们添加到 Form。但是，然后您将迭代 Form 的子级，就好像它们是数据控件而不是 FormItems 一样。

在不评论其余代码的情况下，看看这个更新后的函数是如何检索数据控件的：

      private function saveToDb():void
      {
           var formItems:Array = myform.getChildren();

           for each (var item:FormItem in formItems)
           {
                var itemChildren:Array = item.getChildren();
                for each (var control:UIComponent in itemChildren)
                {
                     if (control is TextInput)
                     {
                          var text:String = Object(item).text;
                          Alert.show("TextInput");
                     }
                     else if (control is DateField)
                     {
                          var date:Date = DateField(item).selectedDate;
                          Alert.show("Date");
                     }
                }
           }

您也可以删除 formItemArray 变量，因为我们从 Form 和 FormItems 中获取子级列表，所以不需要它。

---

原始响应：

如果您在数组中保留对每个动态表单项的引用，则可以在 getMyFormData() 函数中迭代每个动态表单项。

例如，

protected var formItems:Array = new Array();

// Other class stuff here...

var ti:TextInput = new TextInput();       
ti.id = Application.application.designList.getItemAt(i).component;
formItems.push(ti); // Add item to array.
fm.addChild(ti);

var ta:TextArea = new TextArea();        
ta.id = Application.application.designList.getItemAt(i).colName;
formItems.push(ta); // Add item to array.
fm.addChild(ta);    

var df:DateField = new DateField();
df.id = Application.application.designList.getItemAt(i).component;
formItems.push(df); // Add item to array.
fm.addChild(df);

myform.addChild(fm); 


<mx:button click="getMyformData()"/>

private function getMyformData()
{
    //How to get the myform Data dynamically here after validations... ? & 
    for each (var item:UIComponent in formItems)
    {
        if (item is TextInput || item is TextArea)
        {
            // Cast to Object to access the 'text' property without the compiler complaining.
            var text:String = Object(item).text;
            // Do something with the text...
        }
        else if (item is DateField)
        {
            var date:Date = DateField(item).selectedDate;
            // Do something with the date...
        }
        // Insert additional type checks as needed.
    }
}

您必须自己弄清楚如何处理数据:)

如果您使用单独的列表，请确保在完成后清除 formItems 数组，以便您没有对那些不必要地保留在内存中的项目的引用。

您还可以迭代 fm 容器中的子项，而不是保留单独的表单项数组。您可能必须对要访问的子项做出一些假设，但看起来您可以控制所有添加的子项，所以这没有问题。

我希望这有帮助...

:)