DataGrid使用 for Flex
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="OnLoad()"> <mx:Style> Application 
{
font-size:12px;
} ToolTip { font-size:12px; } ErrorString { font-size:12px; } </mx:Style> <mx:Script> <![CDATA[ import comm.*; import mx.collections.ArrayCollection; import mx.events.DataGridEvent; import mx.controls.Alert; import mx.managers.CursorManager; [Bindable] private var carArray : ArrayCollection = new ArrayCollection(); private function OnLoad():void { var car : CarVO = new CarVO(); car.Name = "Ford"; car.Available = false; carArray.addItem(car); car = new CarVO(); car.Name = "Benz"; car.Available = true; carArray.addItem(car); car = new CarVO(); car.Name = "BMW"; car.Available = true; carArray.addItem(car); car = new CarVO(); car.Name = "BMW"; car.Available = true; carArray.addItem(car); car = new CarVO(); car.Name = "BMW"; car.Available = true; carArray.addItem(car); car = new CarVO(); car.Name = "BMW"; car.Available = true; carArray.addItem(car); car = new CarVO(); car.Name = "BMW"; car.Available = true; carArray.addItem(car); } [Bindable] private var employees:XML = <object> <employee> <name>Christina Coenraets</name> <phone>555-219-2270</phone> <email>ccoenraets@fictitious.com</email> <active>false</active> </employee> <employee> <name>Joanne Wall</name> <phone>555-219-2012</phone> <email>jwall@fictitious.com</email> <active>true</active> </employee> <employee> <name>Maurice Smith</name> <phone>555-219-2012</phone> <email>maurice@fictitious.com</email> <active>false</active> </employee> <employee> <name>Mary Jones</name> <phone>555-219-2000</phone> <email>mjones@fictitious.com</email> <active>false</active> </employee> <employee> <name>Maurice Smith</name> <phone>555-219-2012</phone> <email>maurice@fictitious.com</email> <active>false</active> </employee> <employee> <name>Mary Jones</name> <phone>555-219-2000</phone> <email>mjones@fictitious.com</email> <active>false</active> </employee> <employee> <name>Maurice Smith</name> <phone>555-219-2012</phone> <email>maurice@fictitious.com</email> <active>false</active> </employee> <employee> <name>Mary Jones</name> <phone>555-219-2000</phone> <email>mjones@fictitious.com</email> <active>false</active> </employee> <employee> <name>Maurice Smith</name> <phone>555-219-2012</phone> <email>maurice@fictitious.com</email> <active>false</active> </employee> <employee> <name>Mary Jones</name> <phone>555-219-2000</phone> <email>mjones@fictitious.com</email> <active>false</active> </employee> <employee> <name>Maurice Smith</name> <phone>555-219-2012</phone> <email>maurice@fictitious.com</email> <active>false</active> </employee> <employee> <name>Mary Jones</name> <phone>555-219-2000</phone> <email>mjones@fictitious.com</email> <active>true</active> </employee> </object> private function Button_Click(e:Event):void { if(myTxt.text == "") myTxt.errorString="This Value is not NUll"; else myTxt.errorString = null; } //用户准备好编辑项目以后调度；例如，当鼠标在项目上时，用户释放鼠标按键就会指示这种情况。 private function OnDataGridEdit_Begining(event:DataGridEvent):void { //设置第0列不允许编辑 if(event.columnIndex == 0) event.preventDefault(); if(event.columnIndex == 3) event.preventDefault(); } //在DataGrid中的点CheckBox执行的事件,将修改DataGrid.provider的数据. public function checkBox_click(event:MouseEvent):void { var car:CarVO = CarVO(carArray.getItemAt(gvw.selectedIndex)); if(car.Available == true) car.Available = false; else car.Available = true; gvw.dataProvider = carArray; } //执行DataGrid中的删除选中行. public function btnDelete_Click(event:Event):void { var car:CarVO = CarVO(carArray.getItemAt(gvw.selectedIndex)); Alert.show(car.Name); } //编辑一项. private function gvw_OnEdit_End(e:DataGridEvent):void { CursorManager.setBusyCursor(); var dg:DataGrid = e.currentTarget as DataGrid; var myEditor:TextInput = TextInput(dg.itemEditorInstance); var newVal:String = myEditor.text; var oldVal:String = dg.editedItemRenderer.data[e.dataField].toString(); cellInfo.text = "Cell edited.\n"; cellInfo.text += "Row,column:"+e.rowIndex+","+e.columnIndex+"\n"; cellInfo.text += "new value :"+newVal+"\n"; cellInfo.text += "Old value :"+oldVal; CursorManager.removeBusyCursor(); } ]]> </mx:Script> <mx:transitions> <mx:Transition fromState="*" toState="*"> <mx:Sequence targets="{[panel1,panel2,panel3]}"> <mx:Move duration="200"/> <!--<mx:Rotate angleFrom="180" angleTo="360" /> --> <mx:Resize duration="200" /> </mx:Sequence> </mx:Transition> </mx:transitions> <mx:states> <mx:State name="s1"> <mx:SetProperty target="{panel1}" name="x" value="5"/> <mx:SetProperty target="{panel1}" name="y" value="60"/> <mx:SetProperty target="{panel1}" name="height" value="{hs.value}"/> <mx:SetProperty target="{panel1}" name="width" value="{vs.value}"/> <mx:SetProperty target="{panel2}" name="x" value="135"/> <mx:SetProperty target="{panel2}" name="y" value="10"/> <mx:SetProperty target="{panel2}" name="height" value="30"/> <mx:SetProperty target="{panel2}" name="width" value="125"/> <mx:SetProperty target="{panel3}" name="x" value="270"/> <mx:SetProperty target="{panel3}" name="y" value="10"/> <mx:SetProperty target="{panel3}" name="height" value="30"/> <mx:SetProperty target="{panel3}" name="width" value="125"/> </mx:State> <mx:State name="s2"> <mx:SetProperty target="{panel1}" name="x" value="5"/> <mx:SetProperty target="{panel1}" name="y" value="10"/> <mx:SetProperty target="{panel1}" name="height" value="30"/> <mx:SetProperty target="{panel1}" name="width" value="125"/> <mx:SetProperty target="{panel2}" name="x" value="5"/> <mx:SetProperty target="{panel2}" name="y" value="60"/> <mx:SetProperty target="{panel2}" name="height" value="{hs.value}"/> <mx:SetProperty target="{panel2}" name="width" value="{vs.value}"/> <mx:SetProperty target="{panel3}" name="x" value="270"/> <mx:SetProperty target="{panel3}" name="y" value="10"/> <mx:SetProperty target="{panel3}" name="height" value="30"/> <mx:SetProperty target="{panel3}" name="width" value="125"/> </mx:State> <mx:State name="s3"> <mx:SetProperty target="{panel1}" name="x" value="5"/> <mx:SetProperty target="{panel1}" name="y" value="10"/> <mx:SetProperty target="{panel1}" name="height" value="30"/> <mx:SetProperty target="{panel1}" name="width" value="125"/> <mx:SetProperty target="{panel2}" name="x" value="135"/> <mx:SetProperty target="{panel2}" name="y" value="10"/> <mx:SetProperty target="{panel2}" name="height" value="30"/> <mx:SetProperty target="{panel2}" name="width" value="125"/> <mx:SetProperty target="{panel3}" name="x" value="5"/> <mx:SetProperty target="{panel3}" name="y" value="60"/> <mx:SetProperty target="{panel3}" name="height" value="{hs.value}"/> <mx:SetProperty target="{panel3}" name="width" value="{vs.value}"/> </mx:State> </mx:states> <mx:Panel x="5" y="60" width="{vs.value}" height="{hs.value}" layout="absolute" title="Panel 1" id="panel1" click="this.currentState='s1'"><!--DataGridEvent.HEADER_RELEASE：用户在列标题上按下并释放鼠标以后调度。 DataGridEvent.ITEM_EDIT_BEGIN：准备编辑项目时调度。 DataGridEvent.ITEM_EDIT_BEGINNING：用户准备好编辑项目以后调度；例如，当鼠标在项目上时，用户释放鼠标按键就会指示这种情况。 DataGridEvent.ITEM_EDIT_END：编辑会话结束时调度。 DataGridEvent.ITEM_FOCUS_IN：在项目获得焦点以后调度。 DataGridEvent.ITEM_FOCUS_OUT：在项目失去焦点以后调度。 --> <mx:DataGrid left="10" right="10" top="10" bottom="85" dataProvider="{carArray}" editable="true" itemEditBegin="OnDataGridEdit_Begining(event)" id="gvw" itemEditEnd="gvw_OnEdit_End(event)"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="Available" > <mx:itemRenderer> <mx:Component> <!-- 在Mx:Component中要使用outerDocument发部事件.如 click="outerDocument.checkBox_click(event)"--> <mx:CheckBox label="{data.Name}" selected="{data.Available}" click="outerDocument.checkBox_click(event)"/> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> <mx:DataGridColumn headerText="名称" dataField="Name"/> <mx:DataGridColumn headerText="电话" dataField="Available"/> <mx:DataGridColumn headerText="操作" dataField="Name"> <mx:itemRenderer> <mx:Component> <mx:LinkButton label="删除" click="outerDocument.btnDelete_Click(event)"> </mx:LinkButton> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> <mx:TextArea left="10" right="10" bottom="10" height="70" id="cellInfo"/> </mx:Panel> <mx:Panel x="135" y="10" width="317" height="162" layout="absolute" title="Panel 2" id="panel2" click="this.currentState='s2'"> <mx:TextInput id="myTxt" x="10" y="31" /> <mx:Button label="Button" x="178" y="32" click="Button_Click(event)" toolTip="提交"/> </mx:Panel> <mx:Panel x="270" y="10" width="125" height="30" layout="absolute" title="Panel 3" id="panel3" click="this.currentState='s3'"> </mx:Panel> <mx:Button label="Reset" click="this.currentState=''" bottom="10" horizontalCenter="0"/> <mx:VSlider value="0" maximum="600" minimum="300" tickInterval="10" id="hs" right="5" top="10" bottom="55"/> <mx:HSlider value="0" maximum="1024" minimum="390" tickValues="10" id="vs" bottom="31" right="10" left="10"/></mx:Application>注意:
在DataGrid中的CheckBox列用到了data.Available这种邦定方式.如果把DataGrid的邦定换成是直接的XML对象邦定那么在Data.Available邦定时会出现 warning: unable to bind to property 'Available' on class 'XML' (class is not an IEventDispatcher) 原因是在XML对象内属性Available没有声名[Bindable] 的原因,这样会出现不可预料的结果.如果把他定义用Class 对象在用时使用[Bindable] 关键字问题解决.
