flex checkbox和combobox作為datagrid的渲染器

CheckboxRenderer.as

package renderer

{

import flash.events.Event;

import mx.controls.CheckBox;

public class CheckBoxRenderer extends CheckBox

{

public function CheckBoxRenderer()

{

super();

this.addEventListener(Event.CHANGE,changeHandle);

}

override public function get data():Object{

return super.data;

}

override public function set data(value:Object):void{

super.data=value;

this.selected=value.selected;

}

private function changeHandle(event:Event):void{

data.selected=this.selected;

}

}

}

main.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:renderer="renderer.*">

<mx:Panel width="566" height="337" layout="absolute" title="修正前資料">

<mx:DataGrid id="dg" x="10" y="10" width="532" height="214" editable="true" dataProvider="{arr}"

itemEditEnd="editHandle(event)">

<mx:columns>

<mx:DataGridColumn editable="false">

<mx:itemRenderer>

<mx:Component>

<mx:CheckBox/>

</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

<mx:DataGridColumn headerText="Column 1" dataField="Id" editable="false"/>

<mx:DataGridColumn headerText="Column 1" dataField="year" editable="false"/>

<mx:DataGridColumn headerText="Column 2" dataField="city" editable="false"/>

<mx:DataGridColumn headerText="Column 3" dataField="total"/>

<mx:DataGridColumn headerText="Modify" editable="false">

<mx:itemRenderer>

<mx:Component>

<mx:Button label="修改" click="outerDocument.modifyHandle()"/>

</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

<mx:DataGridColumn editable="false" rendererIsEditor="true">

<mx:itemRenderer>

<mx:Component>

<mx:ComboBox selectedIndex="{data.flag}" labelField="year" dataProvider="{outerDocument.cboxData}"/>

</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

</mx:columns>

</mx:DataGrid>

<mx:Label x="10" y="257" text="Label" width="211" height="30" id="lbl" fontWeight="bold" color="#F80112"/>

</mx:Panel>

<mx:Component id="ccc">

<mx:ComboBox labelField="year" dataProvider="{outerDocument.cboxData}"/>

</mx:Component>

<mx:Panel width="560" height="346" layout="absolute" title="修正後的資料">

<mx:DataGrid id="dg2" x="10" y="10" width="532" height="214" editable="true" dataProvider="{arr}"

itemClick="itemHandle(event)">

<mx:columns>

<mx:DataGridColumn paddingLeft="10" dataField="selected" editable="false"

itemRenderer="renderer.CheckBoxRenderer"/>

<mx:DataGridColumn headerText="Column 1" dataField="Id" editable="false"/>

<mx:DataGridColumn headerText="Column 2" dataField="city" editable="false"/>

<mx:DataGridColumn headerText="Column 3" dataField="total"/>

<mx:DataGridColumn headerText="Modify" editable="false">

<mx:itemRenderer>

<mx:Component>

<mx:ComboBox selectedIndex="{data.flag}" labelField="year" dataProvider="{outerDocument.cboxData}" close="outerDocument.cbHandle(this)" change="data.flag=selectedIndex"/>

</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

</mx:columns>

</mx:DataGrid>

<mx:Label x="10" y="257" text="Label" width="211" height="30" id="lbl2" fontWeight="bold" color="#F80112"/>

<mx:CheckBox id="cbox" x="10" y="227" label="全 選" change="selectAll()"/>

</mx:Panel>

<!--==============================修改後script============================================-->

<mx:Script>

<!--[CDATA[

import mx.controls.ComboBox;

import mx.events.ListEvent;

private function itemHandle(event:ListEvent):void{

//var flag:Boolean=dg2.selectedItem.selected;

for each(var obj:Object in arr){

if(obj.selected==true){

Alert.show(obj.Id);

}

}

}

private function selectAll():void{

if(cbox.selected==true){

for each(var obj:Object in arr){

obj.selected=true;

}

}else{

for each(var obj:Object in arr){

obj.selected=false;

}

}

arr.refresh();

}

]]>

</mx:Script>

<!--==============================修改前script============================================-->

<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.controls.dataGridClasses.DataGridColumn;

import mx.events.DataGridEvent;

import mx.collections.ArrayCollection;

[Bindable]

private var arr:ArrayCollection=new ArrayCollection([

{Id:1001,year:2009,city:"Shanghai",provice:"上海",total:580000,selected:false,flag:0},

{Id:1002,year:2009,city:"Beijing",provice:"河北省",total:7852020,selected:false,flag:1},

{Id:1003,year:2009,city:"Nanjing",provice:"江蘇省",total:895145,selected:false,flag:2},

{Id:1004,year:2009,city:"Hangzhou",provice:"浙江省",total:4132415,selected:false,flag:3},

{Id:1005,year:2009,city:"Shanghai",provice:"上海",total:580000,selected:false,flag:0},

{Id:1006,year:2009,city:"Beijing",provice:"河北省",total:7852020,selected:false,flag:1},

{Id:1007,year:2009,city:"Nanjing",provice:"江蘇省",total:895145,selected:false,flag:2},

{Id:1008,year:2009,city:"Hangzhou",provice:"浙江省",total:4132415,selected:false,flag:2},

{Id:1009,year:2009,city:"Shanghai",provice:"上海",total:580000,selected:false,flag:0},

{Id:1010,year:2009,city:"Beijing",provice:"河北省",total:7852020,selected:false,flag:1},

{Id:1012,year:2009,city:"Nanjing",provice:"江蘇省",total:895145,selected:false,flag:2},

{Id:1013,year:2009,city:"Hangzhou",provice:"浙江省",total:4132415,selected:false,flag:3}

]);

[Bindable]

public var cboxData:ArrayCollection=new ArrayCollection([

{year:2006},

{year:2007},

{year:2008},

{year:2009},

]);

private function editHandle(event:DataGridEvent):void{

var cols:DataGridColumn=dg.columns[event.columnIndex];

var str:String=dg.itemEditorInstance[cols.editorDataField];

if(event.dataField=="total"){

var num:Number=Number(str);

if(isNaN(num)||str.length>6){

event.preventDefault();

lbl.text="格式或長度不正确!";

}else{

this.lbl.text="編輯的ID："+event.itemRenderer.data.Id+"編輯後的值是："+str;

/* */

}

}

}

private function dgItemClick(event:ListEvent):void{

Alert.show(dg.selectedItem.year);

}

public function modifyHandle():void{

this.lbl.text=dg.selectedItem.Id;

}

public function ckHandle(obj:Object):void{

if(obj.selected){

this.lbl.text+=dg.selectedItem.Id;

}

lbl.text="";

}

public function cbHandle(obj:Object):void{

lbl2.text=dg2.selectedItem.Id+"-"+obj.selectedItem.year;

}

]]-->

</mx:Script>

</mx:Application>