Datagrid Cell render avec un composant personnalisé

Question

Il ya quelques heures, j'ai demandé comment créer un composant personnalisé (composant textInput et label et créé une définition de composant) et avec vos réponses, je peux le faire maintenant.

Problème 2: Je voudrais utiliser ce composant dans une colonne DataGrid pour que l'utilisateur puisse taper une valeur dans le textInput qui mettra à jour le fournisseur de données sous-jacent. Je sais que je devrais utiliser un cellrenderer comme je l'ai fait avec une colonne de case à cocher (également avec de l'aide sur le Net), mais à ce stade, je ne fais que retirer mes cheveux. S'il vous plaît aider.

Answer 1

Cela peut paraître désordonné car c'est un exemple modifié.

Assurez-vous que vous avez le DataGrid, composants Label et TextInput dans la bibliothèque de la LDF vous voulez essayer ceci:

// 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); 

Et la classe CustomCell ressemble à ceci:

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 { 
     } 

    } 
} 

Le code provient principalement de this devnet article.

Cela fonctionne bien, comme dans, il est modifiable. La solution est une classe de composant (une classe qui étend fl.core.UIComponent), implémentant l'interface ICellRender de sorte qu'elle puisse être définie en tant que moteur de rendu et contenant les composants Label et TextInput. Les données seront également mappées à TextInput.text, de sorte qu'il peut être facilement modifié.

Si DataGrid est un peu gonflé et que vous souhaitez utiliser la définition de composant ou quelque chose de plus simple. Je suppose que vous pouvez pirater une solution en utilisant une liste et setting a custom cellRenderer using styles. Je suppose que des clips personnalisés sont utilisés comme rendu de cellule dans la liste Plugins de la page tweenlite.

HTH, George