De component DataGrid aanpassen

Een object DataGrid kan meerdere kolommen bevatten en u kunt verschillende celrenderers opgeven voor elke kolom. Elke kolom van een DataGrid wordt vertegenwoordigd door een objecDataGridColumn en de klasse DataGridColumn bevat de eigenschap cellRenderer waarvoor u de CellRenderer voor de kolom kunt definiëren.

1. Maak een nieuw Flash-document (ActionScript 3.0).

2. Sleep de component DataGrid naar het deelvenster Bibliotheek.

3. Voeg de volgende code toe aan het deelvenster Handelingen in frame 1 van de tijdlijn. Met deze code wordt een DataGrid gemaakt met een lange reeks tekst in de derde kolom. Uiteindelijk wordt de eigenschap cellRenderer van de kolom inggsteld op de naam van een celrenderer die een cel van meerdere regels rendeert.

   /* 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. Sla het FLA-bestand op als MultiLineGrid.fla.

5. Maak een nieuw ActionScript-bestand.

6. Kopieer de volgende ActionScript-code in het Script-venster:

   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. Sla het ActionScript-bestand op als MultiLineCell.as in dezelfde map als u de MultiLineGrid.fla hebt opgeslagen.

8. Keer terug naar de toepassing MultiLineGrid.fla en selecteer Besturing > Film Testen.

   De DataGrid moet er als volgt uitzien:

   

   DataGrid voor de toepassing MultiLineGrid.fla

U kunt de tekststijl voor een koprij instellen met behulp van de stijl headerTextFormat . In het volgende voorbeeld wordt het object TextFormat gebruikt om de stijl headerTextFormat in te stellen op het lettertype Arial, de kleur rood, tekengrootte 14 en cursief.

1. Maak een nieuw document van het type Flash-bestand (ActionScript 3.0).

2. Sleep een component DataGrid naar het werkgebied en geef deze de instantienaam aDg .

3. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voer de volgende code in:

   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. Selecteer Besturing > Film testen om de toepassing uit te voeren.