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,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>