DataGrid bileşenini özelleştirme

DataGrid nesnesinde birden çok sütun bulunabilir ve siz de her sütun için farklı hücre oluşturucuları belirtebilirsiniz. DataGrid öğesinin her sütunu bir DataGridColumn nesnesiyle temsil edilir ve DataGridColumn sınıfı, sütun için CellRenderer öğesini tanımlayabileceğiniz bir cellRenderer özelliğini içerir.

1. Yeni bir Flash belgesi (ActionScript 3.0) oluşturun.

2. DataGrid bileşenini Kütüphane paneline sürükleyin.

3. Zaman Çizelgesi'nin Kare 1 öğesindeki Eylemler paneline şu kodu ekleyin. Bu kod, üçüncü sütunda uzun bir metin dizesiyle birlikte bir DataGrid öğesi oluşturur. Sonunda sütunun cellRenderer özelliğini, birden çok satır hücresi oluşturan bir hücre oluşturucusunun adına ayarlar.

   /* 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 dosyasını MultiLineGrid.fla olarak kaydedin.

5. Yeni bir ActionScript dosyası oluşturun.

6. Şu ActionScript kodunu Komut Dosyası penceresine kopyalayın:

   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 dosyasını, MultiLineGrid.fla dosyasını kaydettiğiniz aynı klasöre MultiLineCell.as olarak kaydedin.

8. MultiLineGrid.fla uygulamasına geri dönün ve Kontrol Et > Filmi Test Et seçeneklerini belirleyin.

   DataGrid öğesinin şöyle görünmesi gerekir:

   

   MultiLineGrid.fla uygulaması için DataGrid

headerTextFormat stilini kullanarak üstbilgi satırının metin stilini ayarlayabilirsiniz. Şu örnek, Arial fontunu, kırmızı rengini, 14 font boyutunu ve italik özelliklerini kullanmak üzere headerTextFormat stilini ayarlamak için TextFormat nesnesini kullanır.

1. Yeni bir Flash dosyası (ActionScript 3.0) belgesi oluşturun.

2. DataGrid bileşenini Sahne Alanı'na sürükleyin ve bu bileşene aDg örnek adını verin.

3. Eylemler panelini açın, ana Zaman Çizelgesi'nde Kare 1'i seçin ve şu kodu girin:

   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. Uygulamayı çalıştırmak için Kontrol Et > Filmi Test Et'i seçin.