如何閱讀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

修改後的迴應：

OK，我想我看到的問題。

您正在將數據控件添加到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容器中的子項。你可能需要對你將要訪問的孩子做一些假設，但是看起來你可以控制所有添加的孩子，所以這沒有問題。

我希望幫助...

:)