Personalización del componente DataGrid

Un objeto DataGrid puede tener varias columnas y se pueden especificar distintos procesadores de celdas para cada columna. Todas las columnas de un objeto DataGrid se representan con un objeto DataGridColumn, y la clase DataGridColumn incluye una propiedad cellRenderer , para la que se puede definir la clase CellRenderer para la columna.

1. Cree un nuevo documento de Flash (ActionScript 3.0).

2. Arrastre el componente DataGrid al panel Biblioteca.

3. Añada el siguiente código al panel Acciones, en el fotograma 1 de la línea de tiempo. Este código crea un componente DataGrid con una cadena larga de texto en la tercera columna. Al final, establece la propiedad cellRenderer de la columna en el nombre de un procesador de celdas que represente una celda de varias líneas.

   /* This is a simple cell renderer example.It invokes 
   the MultiLineCell cell renderer to display a multiple  
   line text field in one of a DataGrid's columns. */ 
    
   import fl.controls.DataGrid; 
   import fl.controls.dataGridClasses.DataGridColumn; 
   import fl.data.DataProvider; 
   import fl.controls.ScrollPolicy; 
    
   // Create a new DataGrid component instance. 
   var aDg:DataGrid = new DataGrid(); 
    
   var aLongString:String = "An example of a cell renderer class that displays a multiple line TextField" 
   var myDP:Array = new Array(); 
   myDP = [{firstName:"Winston", lastName:"Elstad", note:aLongString, item:100}, 
       {firstName:"Ric", lastName:"Dietrich", note:aLongString, item:101},  
       {firstName:"Ewing", lastName:"Canepa", note:aLongString, item:102},  
       {firstName:"Kevin", lastName:"Wade", note:aLongString, item:103},      
       {firstName:"Kimberly", lastName:"Dietrich", note:aLongString, item:104},  
       {firstName:"AJ", lastName:"Bilow", note:aLongString, item:105},  
       {firstName:"Chuck", lastName:"Yushan", note:aLongString, item:106},     
       {firstName:"John", lastName:"Roo", note:aLongString, item:107}, 
   ]; 
    
   // Assign the data provider to the DataGrid to populate it. 
   // Note: This has to be done before applying the cellRenderers. 
   aDg.dataProvider = new DataProvider(myDP); 
    
   /* Set some basic grid properties. 
   Note: The data grid's row height should reflect 
   the number of lines you expect to show in the multiline cell. 
   The cell renderer wil size to the row height. 
   About 40 for 2 lines or 60 for 3 lines.*/ 
    
   aDg.columns = ["firstName", "lastName", "note", "item"]; 
   aDg.setSize(430,190); 
   aDg.move(40,40); 
   aDg.rowHeight = 40;// Allows for 2 lines of text at default text size. 
   aDg.columns[0].width = 70; 
   aDg.columns[1].width = 70; 
   aDg.columns[2].width = 230; 
   aDg.columns[3].width = 60; 
   aDg.resizableColumns = true; 
   aDg.verticalScrollPolicy = ScrollPolicy.AUTO; 
   addChild(aDg); 
   // Assign cellRenderers. 
   var col3:DataGridColumn = new DataGridColumn(); 
   col3 = aDg.getColumnAt(2); 
   col3.cellRenderer = MultiLineCell;

4. Guarde el archivo FLA con el nombre MultiLineGrid.fla.

5. Cree un archivo de ActionScript.

6. Copie el siguiente código ActionScript en la ventana Script:

   package { 
    
    
       import fl.controls.listClasses.CellRenderer; 
    
       public class MultiLineCell extends CellRenderer 
       { 
            
           public function MultiLineCell() 
           {     
               textField.wordWrap = true; 
               textField.autoSize = "left"; 
           } 
           override protected function drawLayout():void {             
               textField.width = this.width; 
               super.drawLayout(); 
           } 
       } 
   }

7. Guarde el archivo de ActionScript como MultiLineCell.as en la misma carpeta donde guardó el archivo MultiLineGrid.fla.

8. Vuelva a la aplicación MultiLineGrid.fla y seleccione Control > Probar película.

   El componente DataGrid debería tener un aspecto similar al siguiente:

   

   DataGrid para la aplicación MultiLineGrid.fla

Para definir el estilo de texto de una fila de encabezado, se puede utilizar el estilo headerTextFormat . En el siguiente ejemplo se utiliza el objeto TextFormat para establecer que el estilo headerTextFormat utilice la fuente Arial, el color rojo, un tamaño de fuente de 14 y la cursiva.

1. Cree un nuevo documento de archivo de Flash (ActionScript 3.0).

2. Arrastre el componente DataGrid al escenario y asígnele el nombre de instancia aDg .

3. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código siguiente:

   import fl.data.DataProvider; 
   import fl.controls.dataGridClasses.DataGridColumn; 
    
   var myDP:Array = new Array(); 
   myDP = [{FirstName:"Winston", LastName:"Elstad"}, 
       {FirstName:"Ric", LastName:"Dietrich"},  
       {FirstName:"Ewing", LastName:"Canepa"},  
       {FirstName:"Kevin", LastName:"Wade"},      
       {FirstName:"Kimberly", LastName:"Dietrich"},  
       {FirstName:"AJ", LastName:"Bilow"},  
       {FirstName:"Chuck", LastName:"Yushan"},     
       {FirstName:"John", LastName:"Roo"}, 
   ]; 
    
   // Assign the data provider to the DataGrid to populate it. 
   // Note: This has to be done before applying the cellRenderers. 
   aDg.dataProvider = new DataProvider(myDP); 
   aDg.setSize(160,190); 
   aDg.move(40,40); 
   aDg.columns[0].width = 80; 
   aDg.columns[1].width = 80; 
   var tf:TextFormat = new TextFormat(); 
   tf.size = 14; 
   tf.color = 0xff0000; 
   tf.italic = true; 
   tf.font = "Arial" 
   aDg.setStyle("headerTextFormat", tf);

4. Seleccione Control > Probar película para ejecutar la aplicación.