这个例子说明了如何创建一个基于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 >
< 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 >
< 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/