Anpassa komponenten DataGrid

Ett DataGrid-objekt kan ha flera kolumner och du kan ange olika cellåtergivare för varje kolumn. Varje kolumn i en DataGrid representeras av ett DataGridColumn-objekt och klassen DataGridColumn innehåller en cellRenderer -egenskap som du kan definiera kolumnens CellRenderer för.

1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

2. Dra DataGrid-komponenten till bibliotekspanelen.

3. Lägg till följande kod i åtgärdspanelen i den första bildrutan på tidslinjen. Den här koden skapar en DataGrid med en lång textsträng i den tredje kolumnen. I slutet ger den kolumnens cellRenderer -egenskap namnet på en cellåtergivare som återger en cell med flera rader.

   /* 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. Spara FLA-filen som MultiLineGrid.fla.

5. Skapa en ny ActionScript-fil.

6. Kopiera följande ActionScript-kod till i skriptfönstret:

   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. Spara ActionScript-filen som MultiLineCell.as i samma mapp som du sparade MultiLineGrid.fla i.

8. Återgå till MultiLineGrid.fla-programmet och välj Kontroll > Testa film.

   DataGrid bör se ut så här:

   

   DataGrid för MultiLineGrid.fla-programmet

Du ställer in textstilen för en rubrikrad genom att använda headerTextFormat -stilen. Följande exempel använder TextFormat-objektet för att ställa in headerTextFormat -stilen så att den använder teckensnittet Arial, röd färg, teckensnittsstorleken 14 och kursiv.

1. Skapa ett nytt Flash-fildokument (ActionScript 3.0).

2. Dra DataGrid-komponenten till scenen och ge den förekomstnamnet aDg .

3. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande kod:

   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. Välj Kontroll > Testa filmen för att köra programmet.