Dostosowywanie składnika DataGrid

Obiekt DataGrid może zawierać wiele kolumn i możliwe jest określenie różnych mechanizmów renderujących komórki dla poszczególnych kolumn. Każda kolumna obiektu DataGrid ma odzwierciedlenie w postaci obiektu DataGridColumn, a klasa DataGridColumn zawiera właściwość cellRenderer umożliwiającą zdefiniowanie mechanizmu renderującego komórki danej kolumny.

1. Utwórz nowy dokument Flash (ActionScript 3.0).

2. Przeciągnij składnik DataGrid do panelu Biblioteka.

3. Dodaj poniższy kod do panelu Operacje w klatce 1 na osi czasu. Kod ten tworzy składnik DataGrid z długim ciągiem znaków w trzeciej kolumnie. Na końcu we właściwości cellRenderer kolumny ustawiana jest nazwa mechanizmu renderującego komórki, który renderuje komórkę wielowierszową.

   /* 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. Zapisz plik FLA jako MultiLineGrid.fla.

5. Utwórz nowy plik ActionScript.

6. Skopiuj następujący kod ActionScript do okna Skrypt:

   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. Zapisz plik ActionScript jako MultiLineCell.as w tym samym folderze, w którym zapisany został plik MultiLineGrid.fla.

8. Powróć do aplikacji MultiLineGrid.fla i wybierz polecenia Sterowanie > Testuj film.

   Składnik DataGrid powinien wyglądać tak:

   

   Składnik DataGrid dla aplikacji MultiLineGrid.fla

Styl tekstu dla wiersza nagłówka można ustawić za pomocą stylu headerTextFormat . W poniższym przykładzie obiekt TextFormat użyty został w celu ustawienia stylu headerTextFormat do użytku z pochyloną czcionką Arial w kolorze czerwonym o rozmiarze 14.

1. Utwórz nowy plik z dokumentem Flash (ActionScript 3.0).

2. Przeciągnij składnik DataGrid na stół montażowy i nadaj instancji nazwę aDg .

3. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący 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. Wybierz polecenia Sterowanie > Testuj film, aby uruchomić aplikację.