Flex datagrid itemrender/itemeditor

DataGrid中的itemEditor和itemRenderer.

从字面上的意思,我们可以理解itemEditor为DataGrid的单元格编辑器,而itemRenderer则为渲染器,就是说.itemEditor只会在单元格处理编辑状态下才会出现.而itemRenderer则是一直显示(就是网友关心的,自定义DataGrid的列)

 

首先我们看看在mxml中定义itemEditor/itemRenderer的方法.定义代码在columns中进行(表头),只要在相应的列中,设定/,然后选择你需要使用的组件,另外这里要注意的是..设置了itemEditor/itemRenderer的DataGridColumn,需要增加一个editorDataField,相应的填上你选择的组件的属性.如这里..我需要的是NumericStepper的value属性.所以填上editorDataField="value",这样. 当NumericStepper修改时..相应的单元格的值就会变成NumericStepper的value属性的值.

<mx:DataGridColumn headerText="数量" dataField="count" editorDataField="value"> <mx:itemEditor> <mx:Component> <mx:NumericStepper maximum="1000" minimum="10"> </mx:NumericStepper> </mx:Component> </mx:itemEditor> </mx:DataGridColumn>

而as的写法..大概跟上面类似.,需要注意的是.用代码设置itemRenderer时.接受的类形是ClassFactory.,如果需要给选择的组件(这里是NumericStepper),需要设置ClassFactory的properties属性.为一个object,我们看看代码

col = new DataGridColumn() col.headerText = "价格" col.dataField = "price" col.editable = false var itemRenderer:ClassFactory = new ClassFactory(NumericStepper); itemRenderer.properties = {maximum:1000,minimum:10} col.itemRenderer = itemRenderer col.editorDataField = "value"

itemEditor类似这里不说明了
看完整代码：

<?xml version="1.0"?> <mx:Application initialize="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontFamily="宋体" fontSize="12" width="424" height="396"> <mx:Script> <!--[CDATA[ import mx.controls.*; import mx.controls.dataGridClasses.*; private var DataGrid1:DataGrid [Bindable] public var dataArr:Array = [{id:1,name:"苹果",price:100,count:100}, {id:2,name:"西瓜",price:50,count:200}, {id:3,name:"水蜜桃",price:333,count:50}] private var aaa:Object private function init():void{ DataGrid1 = new DataGrid() DataGrid1.editable = true DataGrid1.x = 10 DataGrid1.y = 10 addChild(DataGrid1) crColumn() addItem() } private function crColumn():void{ var col:DataGridColumn col = new DataGridColumn() col.headerText = "序号" col.dataField = "id" col.editable = false DataGrid1.columns = DataGrid1.columns.concat(col) col = new DataGridColumn() col.headerText = "名称" col.dataField = "name" DataGrid1.columns = DataGrid1.columns.concat(col) col = new DataGridColumn() col.headerText = "价格" col.dataField = "price" col.editable = false var itemRenderer:ClassFactory = new ClassFactory(NumericStepper); itemRenderer.properties = {maximum:1000,minimum:10} col.itemRenderer = itemRenderer col.editorDataField = "value" DataGrid1.columns = DataGrid1.columns.concat(col) col = new DataGridColumn() col.headerText = "数量" col.dataField = "count" var itemEditor:ClassFactory = new ClassFactory(NumericStepper); itemEditor.properties = {maximum:1000,minimum:10} col.itemEditor = itemEditor col.editorDataField = "value" DataGrid1.columns = DataGrid1.columns.concat(col) } private function addItem():void{ DataGrid1.dataProvider = dataArr } ]]--> </mx:Script> <mx:DataGrid id="DataGrid2" editable="true" dataProvider="{dataArr}" y="200" x="10"> <mx:columns> <mx:DataGridColumn headerText="序号" dataField="id" editable="false"/> <mx:DataGridColumn headerText="名称" dataField="name"/> <mx:DataGridColumn headerText="价格" dataField="price" editorDataField="value" editable="false"> <mx:itemRenderer> <mx:Component> <mx:NumericStepper maximum="1000" minimum="10"> </mx:NumericStepper> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> <mx:DataGridColumn headerText="数量" dataField="count" editorDataField="value"> <mx:itemEditor> <mx:Component> <mx:NumericStepper maximum="1000" minimum="10"> </mx:NumericStepper> </mx:Component> </mx:itemEditor> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:Application>