自訂 DataGrid 組件

DataGrid 物件可以擁有多個欄，您也可以為每一欄指定不同的儲存格輸出器。DataGrid 的每一欄都是由 DataGridColumn 物件表示，DataGridColumn 類別也具有 cellRenderer 屬性，您可以定義每一欄的 CellRenderer。

1. 建立新的 Flash 文件 (ActionScript 3.0)。

2. 將 DataGrid 組件拖曳到「元件庫」面板。

3. 在時間軸的「影格 1」的「動作」面板中，加入下列程式碼。此程式碼會建立 DataGrid，並且在其第三欄中含有一長串的文字字串。最後，它會將該欄的 cellRenderer 屬性設定為可呈現多行儲存格的儲存格輸出器名稱。

   /* 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. 將 FLA 檔另存成 MultiLineGrid.fla。

5. 建立新的 ActionScript 檔案。

6. 將下列 ActionScript 程式碼複製到「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. 將 ActionScript 檔命名為 MultiLineCell.as，然後儲存到與 MultiLineGrid.fla 檔相同的資料夾中。

8. 回到 MultiLineGrid.fla 應用程式，然後選取「控制 > 測試影片」。

   該 DataGrid 看起來如下：

   

   MultiLineGrid.fla 應用程式的 DataGrid

您可以使用 headerTextFormat 樣式，設定標題列的文字樣式。下列範例會使用 TextFormat 物件設定 headerTextFormat 樣式，以便使用大小為 14、斜體及紅色的 Arial 字體。

1. 建立新的 Flash 檔案 (ActionScript 3.0) 文件。

2. 將 DataGrid 組件拖曳到「舞台」，並為它指定實體名稱 aDg 。

3. 開啟「動作」面板，選取主要「時間軸」中的「影格 1」，然後輸入下列程式碼：

   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. 選取「控制 > 測試影片」，執行應用程式。