Flex教程/组件详解之一：DataGrid(6)

今天我们继续讲DataGrid,介绍一下DataGrid中的itemEditor和itemRenderer.

从字面上的意思,我们可以理解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>