itemEditor和itemRenderer的区别「终于解决」-

itemEditor和itemRenderer的区别「终于解决」       从字面上的意思,我们可以理解itemEditor为DataGrid的单元格编辑器,而itemRenderer则为渲染器,就是说.itemEditor只会在单元格处理编辑状态下才会出现.而itemRenderer则是一直显示(就是网友关心的,自定义DataGrid的列)       首先我们看看在mxml中定义itemEditor/itemRenderer的方法.定义代码在colu

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

首先我们看看在mxml中定义itemEditor/itemRenderer的方法.定义代码在columns中进行(表头),只要在相应的列中,设定<mx:itemRenderer>/<mx:itemEditor>,然后选择你需要使用的组件,另外这里要注意的是..设置了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>