flex中用CheckBox作为DataGrideItemRender状态丢失的解决方法

flex中用CheckBox作为DataGrid的DataGrid的ItemRender，当我们滚动DataGrid的滚动条或者我们对DataGrid的列进行排序的时候经常会出现CheckBox的选中状态丢失或者说不及时更新的问题，下面的一个demo解决了这个问题：主要方法是在重写ItemRender的set data方法，在其中对ChexBox进行赋值操作。

 

ItemRenderDemo.mxml:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.controls.CheckBox; private var d:ArrayCollection; private function init():void { d = new ArrayCollection(); var xml:XML = <cols> <col id="1" v="true" label="选中"/> <col id="2" v="false" label="未选中"/> <col id="3" v="false" label="未选中"/> <col id="4" v="true" label="选中"/> <col id="5" v="false" label="未选中"/> <col id="6" v="true" label="选中"/> <col id="7" v="false" label="未选中"/> <col id="8" v="false" label="未选中"/> <col id="9" v="true" label="选中"/> <col id="10" v="false" label="未选中"/> </cols> for each(var col:XML in xml.col) { d.addItem(col.copy()); } dg.dataProvider = d; this.addEventListener("CHANGE_STATE_EVENT",changeStateEventHandler); } private function changeStateEventHandler(evt:Event):void { evt.stopImmediatePropagation(); var cb:CheckBox = evt.target as CheckBox; var xml:XML; var index:int = d.getItemIndex(dg.selectedItem); var id:String = dg.selectedItem.@id.toString(); if(cb.selected) { xml = <col id={id} v="true" label="选中"/> } if(!cb.selected) { xml = <col id={id} v="false" label="未选中"/> } d.removeItemAt(index); d.addItemAt(xml,index); } ]]--> </mx:Script> <mx:DataGrid x="112" y="94" width="376" height="224" id="dg"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="@id"/> <mx:DataGridColumn headerText="Column 2" dataField="@v" itemRenderer="Render"/> <mx:DataGridColumn headerText="Column 3" dataField="@label"/> </mx:columns> </mx:DataGrid> </mx:Application>

 

Render.mxml:

<?xml version="1.0" encoding="utf-8"?> <mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml" change="changeHandler()"> <mx:Script> <!--[CDATA[ [Bindable] private var isSelected:Boolean; override public function get data():Object { return super.data; } override public function set data(value:Object):void { super.data = value; if(value.@v == "true") { isSelected = true; } else if(value.@v == "false") { isSelected = false; } else { trace("some error hannped"); } this.selected = isSelected; } private function changeHandler():void { dispatchEvent(new Event("CHANGE_STATE_EVENT",true,false)); } ]]--> </mx:Script> </mx:CheckBox>