将datagrid链接到文本输入时出现问题

时间:2010-08-09 21:05:06

标签: flex flex3 datagrid textinput

我想要做的是让用户将他的数据输入到多个文本框中,然后一旦输入数据,它就会在运行时显示在数据网格上。问题是,当我运行应用程序时,我单击了我的按钮但没有输入的信息被添加到datagrid。按下按钮后,我的文本框也应该清除,但没有任何反应。这是我的代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
    <![CDATA[

     import mx.collections.ArrayCollection;

     [Bindable]private var dgItems:ArrayCollection;
     [Bindable]public var temp:Object;


     public function addItem(evt:Event):void {
     //add item if the text input fields are not empty
      if(name_input.text != ""&& location_input.text !="") {
     //create a temporary Object
      temp = myDG.selectedItem;
      var temp:Object = new Object();
     //add the text from the textfields to the object
      temp = {name:name_input.text, location:location_input.text};

     //this will add the object to the ArrayColldection (wich is binded with the DataGrid)
      dgItems.addItem(temp);
     //clear the input fields
      name_input.text = "";
       location_input.text ="";
      }
     }
    ]]>
   </mx:Script>

 <mx:DataGrid  x="97" y="110"  dataProvider="{dgItems}" id="myDG">
  <mx:columns>
   <mx:DataGridColumn headerText="Column 1" dataField="name:"/>
   <mx:DataGridColumn headerText="Column 2" dataField="location:"/>

  </mx:columns>
 </mx:DataGrid>
 <mx:Button x="97" y="51" label="add" click="addItem(event)"/>
 <mx:TextInput x="117" y="300" id="location_input"/>
 <mx:TextInput x="117" y="340" id="name_input"/>
</mx:Application>

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

您的代码有很多错误。首先,您没有初始化dgItems数组集合,因此它的值为null。当您尝试将“addItem”添加到空对象时,您会收到错误。

其次,您在初始化DataGrid的ArrayCollection dataProvider之前尝试访问dataGrid的selectedItem。列表中没有项目,可能没有selectedItem。

第三,你要创建两个新对象;一次使用'new Object'行并再次使用 用于定义对象的内联语法:'{}

第四,DataGridColumn上的数据字段属性都包含冒号,但对象的属性却没有。

我希望这会有所帮助。

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[

            import mx.collections.ArrayCollection;

            // array collection was never initialized; you can't items to a null object 
            [Bindable]private var dgItems:ArrayCollection = new ArrayCollection();
// not needed
//          [Bindable]public var temp:Object;


            public function addItem(evt:Event):void {
                //add item if the text input fields are not empty
                if(name_input.text != ""&& location_input.text !="") {
                    //create a temporary Object
                    // this line of code serves no purpos
                    //                  temp = myDG.selectedItem;
                    var temp:Object // = new Object();
                    //add the text from the textfields to the object
                    temp = {name:name_input.text, location:location_input.text};

                    //this will add the object to the ArrayColldection (wich is binded with the DataGrid)
                    dgItems.addItem(temp);
                    //clear the input fields
                    name_input.text = "";
                    location_input.text ="";
                }
            }
        ]]>
    </mx:Script>

    <mx:DataGrid  x="97" y="110"  dataProvider="{dgItems}" id="myDG">
        <mx:columns>
            <!-- need to remove the colons from the data field -->
            <mx:DataGridColumn headerText="Column 1" dataField="name"/>
            <mx:DataGridColumn headerText="Column 2" dataField="location"/>

        </mx:columns>
    </mx:DataGrid>
    <mx:Button x="97" y="51" label="add" click="addItem(event)"/>
    <mx:TextInput x="117" y="300" id="location_input"/>
    <mx:TextInput x="117" y="340" id="name_input"/>
</mx:Application>

一旦启动调试器,很多错误很容易被发现。如果你还没有使用它,我建议你做一些阅读。