在flex组件中,datagird是我们常用的组件,一般用来展示数据,但是往往我们想在datagird的列中加上button,checkbox或者combox组件,该怎么做呢。下面是一个例子,可以用来举一反三。
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> <fx:Component id="comboboxEditor"> <mx:ComboBox dataProvider="{dt}" editable="true"> <fx:Script> <![CDATA[ private var dt:Array = ["男", "女"]; ]]> </fx:Script> </mx:ComboBox> </fx:Component> </fx:Declarations> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.DataGrid; import mx.events.ListEvent; [Bindable] private var dgDataArr:Array = [{name: "Jon", job: "officer"}, {name: "James", job: "seller"}, {name: "Jodon", job: "manager"}]; [Bindable] private var test:Array = [{name: "loginName", type: "realName",content:"XX"}, {name: "James", type: "seller",content:"XX"}, {name: "Jodon", type: "manager",content:"XX"}]; private function itemClickHandler(e:ListEvent):void { trace(e.target); } protected function add_clickHandler(event:MouseEvent):void { var obj:Object=new Object(); var obj1:Object=new Object(); obj.name= "wgy"; obj.job = "gyw"; obj1.name="wulun";obj1.type="student";obj1.content = "flex develop"; dgDataArr.push(obj); test.push(obj1); dg1.dataProvider = dgDataArr; dg.dataProvider =test; } ]]> </fx:Script> <mx:DataGrid id="dg1" x="2" y="62" width="532" height="160" dataProvider="{dgDataArr}" editable="true" fontSize="14" itemClick="itemClickHandler(event)"> <mx:columns> <mx:DataGridColumn dataField="name" editable="false" /> <mx:DataGridColumn dataField="job"></mx:DataGridColumn> <mx:DataGridColumn dataField="sex" itemEditor="{comboboxEditor}"> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> <mx:DataGrid id="dg" x="10" y="250" width="571" dataProvider="{test}"> <mx:columns> <mx:DataGridColumn headerText="名称" dataField="name"/> <mx:DataGridColumn headerText="类型" dataField="type"/> <mx:DataGridColumn headerText="内容" dataField="content" /> <mx:DataGridColumn headerText="操作" width="60" resizable="false"> <mx:itemRenderer> <fx:Component> <mx:Button fontSize="14" click="openEditWindow(data)" label="添加"> <fx:Script> <![CDATA[ import mx.controls.Alert; private function openEditWindow(data:Object):void { Alert.show(data.name); } ]]> </fx:Script> </mx:Button> </fx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> <s:Button x="30" y="33" id="add" click="add_clickHandler(event)" label="添加一行"/> <s:Button x="137" y="32" id="del" label="删除一行"/> </s:Application>