DataGrid checkbox itemEditor

    一个不错的datagrid itemrender实例。
这个例子说明了如何创建一个基于VBox的itemEditor,这个itemEditor有子控件（这个例子里是一个checkbox）。
    而且说明了如何继承IDropInListItemRenderer 和IFocusManagerComponent 接口。
    还说明了如何添加监听器到数据源，以用来侦测change事件，并在Checkbox状态改变后显示哪些数据发生了改变.
示例：

代码：
MXML:

< 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:datagridcolumn >
     </ mx:datagridcolumn >   

     < mx:textarea  id ="cellInfo"  width ="300"  height ="150" >     

</ mx:textarea >
</ mx:datagridcolumn ></ mx:columns ></ mx:datagrid ></ mx:application >

itemEditor:

<! – itemRenderers\dataGrid\myComponents\EditorDGCheckBox.mxml – >
< mx:vbox  xmlns:mx ="http://www.adobe.com/2006/mxml" >
    implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComponent">

     < 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 {
                followUpCB.setFocus();
            }

            [Bindable]– >            override public function set data(value:Object):void{
                super.data = value;
                followUpCB.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 ="followUpCB"  label ="Follow up needed" >
        change="cbSelected=followUpCB.selected"/>
</ mx:checkbox >
</ mx:vbox >

源文件下载

来自： http://blog.flexmonkeypatches.com/2007/11/06/datagrid-checkbox-itemeditor/