在dataGrid中使用checkBox和ComboBox

在datagrid组件的列中嵌入其他组件体现datagrid的强大，下面做一个实例，在datagrid中嵌入CheckBox和ComboBox，效果图如下：

如图，在datagrid中嵌入了CheckBox、ComboBox以及NumericStepper组件，其实做法都是一样的，通过在列中嵌入itemRenderer来实现

<mx:itemRenderer> <mx:Component> // 需要嵌入的组件 </mx:Component> </mx:itemRenderer>

此功能的代码如下：

<?xml version="1.0" encoding="utf-8"?> <mx:Application initialize="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12"> <mx:Script> <!--[CDATA[ import mx.controls.*; import mx.core.Application; import mx.controls.dataGridClasses.*; private var DataGrid1:DataGrid; public var languageFlag:String = "cn"; [Bindable] public var dataArr2:Array = [{id: 1, name: "苹果", price: 100, count: "不合格", selected: false}, {id: 2, name: "西瓜", price: 50, count: "不合格", selected: true}, {id: 3, name: "水蜜桃", price: 333, count: "错别字", selected: false}] private var aaa:Object [Bindable] public var dataArr:Array = new Array({label: "不合格", data: "2"}, {label: "不合格", data: "3"}, {label: "进口", data: "4"}, {label: "一般", data: "5"}); [Bindable] public var s:int = 2; public function saved():void { var arr:Array = Application.application.dataArr2; for each (var a:Object in arr) { Alert.show("当前数据为: /n" + "序号: " + a.id + ", 名称: " + a.name + ", 数量: " + a.count + ", selected: " + a.selected); } } ]]> </mx:Script> <mx:Component id="myComponent"> <mx:ComboBox x="179" y="1" width="67" dataProvider="{Application.application.dataArr}" selectedIndex="{Application.application.s}"> <mx:Script> <![CDATA[ import mx.core.Application; ]]--> </mx:Script> </mx:ComboBox> </mx:Component> <mx:Button click="saved()" x="883.5" y="76" label="保存"/> <mx:DataGrid id="DataGrid2" editable="true" dataProvider="{dataArr2}" y="120" x="419.5" height="266" width="516"> <mx:columns> <mx:DataGridColumn headerText="序号" id="dg1" dataField="id" editable="false"/> <mx:DataGridColumn headerText="名称" id="dg2" dataField="name"/> <mx:DataGridColumn headerText="价格" id="dg3" dataField="price" editorDataField="value" editable="false"> <mx:itemRenderer> <mx:Component> <mx:NumericStepper maximum="1000" minimum="10" /> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> <mx:DataGridColumn headerText="描述" id="dg4" dataField="count" editable="true" editorDataField="text" itemEditor="{myComponent}"/> <mx:DataGridColumn headerText="选择" dataField="selected" editable="false"> <mx:itemRenderer> <mx:Component> <mx:CheckBox click="data.selected=!data.selected" selected="{data.selected}"/> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:Application>