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/