Datagrid使用自定义组件的单元格渲染

Question

几个小时前，我已经问过如何创建一个自定义组件（textInput和标签组件并创建一个组件定义），以及我现在可以做的答案。

问题2：我想在datagrid列中使用该组件，以便用户可以在textInput中键入一个值，该值将依次更新基础数据提供者。 我知道我应该像使用复选框列一样使用cellrenderer（也可以在网上获得帮助），但在这个阶段，我只是把我的头发拉出来。 请帮忙。

Answer 1

这可能看起来很乱，因为它是一个修改后的例子。

请确保您有在FLA的库中的数据网格，Label和TextInput组件要试试这个：

// Import the required component classes. 
import fl.controls.DataGrid; 
import fl.controls.dataGridClasses.DataGridColumn; 
import fl.data.DataProvider; 
//get some data ready, notice data and label 
var dp:DataProvider = new DataProvider(); 
for(var i:int = 0 ; i < 7; i++) 
    dp.addItem({data:'input '+(i+1),label:'label '+(i+1), title:"item " + (i+1)}); 
var dataCol:DataGridColumn = new DataGridColumn("data"); 
dataCol.cellRenderer = CustomCell; 
var titleCol:DataGridColumn = new DataGridColumn("title"); 

var myDataGrid:DataGrid = new DataGrid(); 
myDataGrid.addColumn(dataCol); 
myDataGrid.addColumn(titleCol); 
myDataGrid.dataProvider = dp; 
myDataGrid.rowHeight = 64; 
myDataGrid.width = 500; 
myDataGrid.rowCount = dp.length - 1; 
myDataGrid.move(10, 10); 
myDataGrid.editable = true; 
addChild(myDataGrid); 

而且CustomCell类看起来是这样的：

package { 
    // Import the required component classes. 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.ListData; 
    import fl.controls.Label; 
    import fl.controls.TextInput; 
    import fl.core.InvalidationType; 
    import fl.core.UIComponent; 
    import fl.data.DataProvider; 
    import flash.display.Sprite; 
    import flash.events.Event; 

    public class CustomCell extends UIComponent implements ICellRenderer { 
     protected var _data:Object; 
     protected var _listData:ListData; 
     protected var _selected:Boolean; 
     //the custom components 
     private var labelComponent:Label; 
     private var inputComponent:TextInput; 
     /** 
     * Constructor. 
     */ 
     public function CustomCell():void { 
      super(); 
      init(); 
     } 
     /** 
     * Draws the Label and TextInput components 
     */ 
     private function init():void{ 
      labelComponent = new Label(); 
      labelComponent.autoSize = 'right'; 
      inputComponent = new TextInput(); 
      inputComponent.editable = true; 

      addChild(labelComponent); 
      addChild(inputComponent); 
      inputComponent.x = labelComponent.width + 5;//5 pixels distance between components 
      inputComponent.drawFocus(true); 
     } 

     public function get data():Object { 
      return _data; 
     } 
     /** 
     * @private (setter) 
     */ 
     public function set data(value:Object):void { 
      _data = value; 
      //there's label data, update the label 
      if(_data.label) labelComponent.text = _data.label; 
      //there's data for the input, update that too 
      if(_data.data) inputComponent.text = _data.data; 
     } 

     public function get listData():ListData { 
      return _listData; 
     } 
     public function set listData(value:ListData):void { 
      _listData = value; 
      invalidate(InvalidationType.DATA); 
      invalidate(InvalidationType.STATE); 
     } 
     public function get selected():Boolean { 
      return _selected; 
     } 
     public function set selected(value:Boolean):void { 
      _selected = value; 
      invalidate(InvalidationType.STATE); 
     } 
     public function setMouseState(state:String):void { 
     } 

    } 
} 

的代码大多来自this devnet文章。

它工作正常，因为它是可编辑的。

解决方案是一个组件类（一个扩展fl.core.UIComponent的类），实现了ICellRender接口，因此它可以被设置为渲染器，并且包含Label和TextInput组件。此外，数据将被映射到TextInput.text，因此可以轻松进行编辑。

如果DataGrid有点臃肿，并且您想要使用组件定义或更简单的东西。我想你可以使用List和setting a custom cellRenderer using styles一起解决一个解决方案。 我猜想自定义剪辑被用作tweenlite页面上插件列表中的单元格渲染器。

HTH， 乔治