flex 自定义控件 用 checkbox

Flex : 用 CheckBox 做 DataGrid 的 itemEditor

分类: Flex / 标签: CheckBox, DataGrid, Flex, itemEditor / 添加回复

<!-- end postmeta -->

<!-- end title -->

<?xml version="1.0" encoding="utf-8"?>
<!-- http://www.slsay.com/archives/23 -->
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml"
      creationcomplete="init()">
    <mx:script>
        <!–[CDATA[
           import mx.events.CollectionEvent;
           import mx.events.DataGridEventReason;
           import mx.collections.ArrayCollection;
           import mx.events.DataGridEvent;
           import mx.events.ListEvent;
           [Bindable]
           private var myAC:ArrayCollection = new ArrayCollection([
               {id:89, Contact: ‘Bob Jones’, FollowUp: true },
               {id:5, Contact: ‘Jane Smith’, FollowUp: true },
               {id:7, Contact: ‘Doug Johnson’, FollowUp: false },
               {id:15, Contact: ‘John Jackson’, FollowUp: true },
               {id:21, Contact: ‘Christina Coenraets’, FollowUp: true },
               {id:4, Contact: ‘Joanne Wall’, FollowUp: false },
               {id:461, Contact: ‘Maurice Smith’, FollowUp: false },
               {id:35, Contact: ‘Lorraine Barnes’, FollowUp: true },
               {id:61, Contact: ‘The Dude’, FollowUp: true },
               {id:56, Contact: ‘Abe Rockaway’, FollowUp: true }
           ]);
           private function init():void{
           myAC.addEventListener(
                   CollectionEvent.COLLECTION_CHANGE, onChange);
           }
           private function onChange(event:CollectionEvent):void {
               for (var i:int=0; i < event.items.length;i++) {
                   var obj:Object=event.items[i].source;
                    for (var p:String in obj) {
                        if(p!="mx_internal_uid") {
                            cellInfo.text += "\n";
                            if(event.items[i].property==p){
                            cellInfo.text +="*"}
                            cellInfo.text += p+": " + obj[p];
                       }
                   }
               }
           }
       ]]>
    </mx:script>
    <mx:Datagrid id="myGrid">
        dataProvider="{myAC}" editable="true" >
        <mx:columns>
            <mx:datagridcolumn datafield="Contact" width="150"/>
            <mx:datagridcolumn datafield="id" width="150"
                  editable="false"/>
            <mx:datagridcolumn datafield="FollowUp">
                width="150"
                headerText="Follow Up?"
                itemRenderer="DGCheckBoxEditor" rendererIsEditor="true"
                editorDataField="cbSelected"/>
        </mx:columns>
    </mx:Datagrid>
    <mx:Textarea id="cellInfo" width="300" height="150"/>
</mx:application>

//itemEditor

<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml"
   implements="mx.controls.listClasses.IDropInListItemRenderer,
                    mx.managers.IFocusManagerComponent">
<!-- http://www.slsay.com/archives/23 -->
<mx:Script>
 <![CDATA[
           import mx.controls.listClasses.ListData;
           import mx.controls.dataGridClasses.DataGridListData;
           import mx.controls.listClasses.BaseListData;
           import mx.controls.dataGridClasses.DataGridItemRenderer
           import mx.events.FlexEvent;

           private var _listData:DataGridListData;
           // Define a property for returning the new value to the cell.
           public var cbSelected:Boolean;      

           // Implement the drawFocus() method for the VBox.
           override public function drawFocus(draw:Boolean):void {
               doneCB.setFocus();
           }
           [Bindable]
           override public function set data(value:Object):void {
               super.data = value;
               doneCB.selected=data[_listData.dataField];
           }
           override public function get data():Object {
               return super.data;
           }
           public function get listData():BaseListData {
               return _listData;
           }
           public function set listData(value:BaseListData):void {
               _listData = DataGridListData(value);
           }  
 ]]>
</mx:Script>
    <mx:CheckBox id="doneCB" label="Done">
           change="cbSelected=doneCB.selected"/>
</mx:Box>