flex checkbox和combobox作为datagrid的渲染器

?flex checkbox和combobox作为datagrid的渲染器

分类： flex3 2009-12-10 20:28 909人阅读 评论(2) 收藏 举报

CheckboxRenderer.as

?

view plain

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

?

view plain

<?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,city:"Beijing",provice:"河北省",total:7852020,flag:1},?

? ? ? ? ? ? {Id:1003,city:"Nanjing",provice:"江苏省",total:895145,flag:2},?

? ? ? ? ? ? {Id:1004,city:"Hangzhou",provice:"浙江省",total:4132415,flag:3},?

? ? ? ? ? ? {Id:1005,?

? ? ? ? ? ? {Id:1006,?

? ? ? ? ? ? {Id:1007,?

? ? ? ? ? ? {Id:1008,?

? ? ? ? ? ? {Id:1009,?

? ? ? ? ? ? {Id:1010,?

? ? ? ? ? ? {Id:1012,?

? ? ? ? ? ? {Id:1013,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> ?