flex的DataGrid渲染列,使其支持更改列数据。

主程序:Test_DataGridEditDemo

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dgArrayCollection:ArrayCollection=new ArrayCollection([{Artist:'Carole King', Album:'Tapestry', Price:11.99,selected:"bar", extras:["bar", "foo","baz"]},
{Artist:'Paul Simon', Album:'Graceland', Price:10.99,selected:"bar", extras:["bar", "foo","baz"]},
{Artist:'Original Cast', Album:'Camelot', Price:12.99,selected:"bar", extras:["bar", "foo","baz"]},
{Artist:'The Beatles', Album:'The White Album', Price:11.99,selected:"bar", extras:["bar", "foo","baz"]},
{Artist:'Carole King', Album:'Tapestry', Price:11.99,selected:"bar", extras:["bar", "foo","baz"]}]);

private var dgArray:Object={name:"Todd Anderson", age:31, appearance:"Intimidating", extras:["bar", "foo","baz"], selected:"bar"};
]]>
</mx:Script>
<mx:DataGrid x="118" y="136" dataProvider="{dgArrayCollection}">
<mx:columns>
<mx:DataGridColumn dataField="Artist"/>
<mx:DataGridColumn dataField="Album" rendererIsEditor="true"/>
<mx:DataGridColumn itemRenderer="DataGridEditDemoRender" editable="true" rendererIsEditor="true"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>


外部渲染器:DataGridEditDemoRender

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="100" doubleClickEnabled="true" currentState="display" implements="mx.controls.listClasses.IDropInListItemRenderer">
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.events.ListEvent;
import mx.controls.listClasses.BaseListData;
// Internal variable for the property value.
private var _listData:BaseListData;
private var _data:Object = {};

override public function set data(value:Object):void{
_data = value;
if(_data.selected != null) {
addEventListener(MouseEvent.DOUBLE_CLICK,startEdit);
}
}
override public function get data():Object{
return _data;
}
private function startEdit(event:Event):void{
if(currentState== "display"){
currentState ="edit";
addEventListener(FocusEvent.FOCUS_OUT,endEdit);
}
}
private function endEdit(event:Event):void{
currentState ="display";
}
//使listData属性绑定
[Bindable("dataChange")]
public function get listData():BaseListData{
return _listData;
}
//定义的setter方法
public function set listData(value:BaseListData):void{
_listData = value;
}
private function setNewData():void{
_data.selected=selectCB.selectedItem;
dispatchEvent(new DataGridEvent(DataGridEvent.ITEM_EDIT_END,true,true,_listData.columnIndex,'selected',_listData.rowIndex));
}

]]>
</mx:Script>
<mx:states>
<mx:State name="edit">
<mx:AddChild>
<mx:ComboBox id="selectCB" addedToStage="selectCB.dataProvider =_data.extras; selectCB.selectedItem = _data.selected" change="setNewData()"/>
</mx:AddChild>
</mx:State>
<mx:State name="display">
<mx:AddChild>
<mx:Text id="text" addedToStage="text.text = _data.selected"/>
</mx:AddChild>
</mx:State>
</mx:states>
</mx:Canvas>

这中写法有些郁闷 但实现效果不错,进一步学习中...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值