Datagrid Cell render с настраиваемым компонентом

Question

Несколько часов назад я спросил, как создать пользовательский компонент (textInput и компонент ярлыка и создать определение компонента), и с вашими ответами я могу это сделать сейчас.

Проблема 2: Я хотел бы использовать этот компонент в столбце datagrid, чтобы пользователь мог ввести значение в textInput, которое, в свою очередь, обновит базовый dataprovider. Я знаю, что я должен использовать cellrenderer, как я сделал с столбцом флажка (также с помощью в сети), но на этом этапе я только вытаскиваю свои волосы. Пожалуйста, помогите.

Answer 1

Это может показаться беспорядочным, поскольку это модифицированный пример.

Убедитесь, что вы имеете DataGrid, этикетки и компоненты TextInput в библиотеке FLA вы хотите попробовать это:

// 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 немного раздувается, и вы хотите использовать компонентное определение или что-то более простое. Я думаю, вы можете взломать решение, используя список и setting a custom cellRenderer using styles. Я предполагаю, что пользовательские клипы используются как средство визуализации ячеек в списке плагинов на странице tweenlite.

НТН, Джордж