技术开发 频道

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

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

ItemRenderDemo.mxml:

view plaincopy to clipboardprint?
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
<?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:

view plaincopy to clipboardprint?
<?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>
 

 

0
相关文章