Datagrid中的Flex CheckBox

时间:2009-07-13 17:13:25

标签: flex datagrid checkbox

In the followin flex Code : 
Also viewable at : http://www.cse.epicenterlabs.com/checkBoxDg/checkBoxDg.html
1. Add a row in datagrid by clicking on "AddRow"
2. Click on "CheckDg" to see the values of all the checkboxes
     - it shows "checkBox57" or "checkBox64" or some similar string
3. Now, "select" the checkBox in the first row.
4. Click again on "CheckDg"
    -it show "true"

So, initially dp.getItemAt(i).date returns a CheckBox
and later it returns the "selected" value of the CheckBox?
Why this difference?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
        <mx:Canvas>
        <mx:DataGrid x="69" y="119" id="dgFee" editable="true" dataProvider="{dp}">
            <mx:columns>
            <mx:DataGridColumn headerText="Date" dataField="date" width="100" editable="true" 
            editorDataField="selected" rendererIsEditor="true">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:CheckBox selected="false">
                                       </mx:CheckBox>
                        </mx:Component>
            </mx:itemRenderer>
            </mx:DataGridColumn>
                       <mx:DataGridColumn dataField="amount" headerText="Amount" editable="true">
                         <mx:itemEditor>
                         <mx:Component>
                                  <mx:TextInput restrict="0-9"/>
                         </mx:Component>
                         </mx:itemEditor>   
                       </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
        <mx:CheckBox x="130" y="54" label="Checkbox" selected="true" click="Alert.show(abc.selected.toString())" id="abc"/>
<mx:Script>
    <![CDATA[
        import mx.controls.CheckBox;
        import mx.collections.ArrayCollection;
        import mx.controls.Alert;
        public var dp:ArrayCollection = new ArrayCollection();
        public function addRow():void
        {
          var tmp:Object = new Object();
          tmp['amount'] = 100;
          tmp['date'] = new CheckBox();
          dp.addItem(tmp);
        }
        public function delRow():void
        {
            if(dgFee.selectedIndex != -1)
            dp.removeItemAt(dgFee.selectedIndex);
        }

        public function loop1():void
        {
            for(var i:int=0;i<dp.length;i++)
            {
               Alert.show(dp.getItemAt(i).date);
            }
        }
    ]]>
</mx:Script>
                <mx:Button x="29" y="89" label="AddRow" click="addRow()"/>
                <mx:Button x="107" y="89" label="DelRow" click="delRow()"/>
                <mx:Button x="184" y="89" label="CheckDg" click="loop1()"/>

</mx:Canvas>    
</mx:Application>

3 个答案:

答案 0 :(得分:3)

您不应该将对象分配给数据变量而是数据。 Checkbox.select属性首先设置为复选框对象,然后在前面的操作之后设置为true或false。试试这个

public function addRow():void
{
  var tmp:Object = new Object();
  tmp['amount'] = 100;
  tmp['date'] = false; // not new CheckBox();
  dp.addItem(tmp);
}

PS:同样dp应归因于[Bindable]: - )

答案 1 :(得分:0)

当您单击网格中的复选框时,它会将“true”或“false”写入日期字段,替换原来的CheckBox对象。我相信itemEditors(你使用你的渲染作为编辑器)做的是将各个组件的.data属性写入集合。

答案 2 :(得分:0)

将该特定数据网格列的“可编辑”属性设置为false。这将解决问题