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 코드를 [스크립트] 윈도우에 복사합니다.

   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. MultiLineGrid.fla를 저장한 폴더에 ActionScript 파일을 MultiLineCell.as로 저장합니다.

8. MultiLineGrid.fla 응용 프로그램으로 돌아와 [컨트롤] > [무비 테스트]를 선택합니다.

   DataGrid는 다음과 비슷해야 합니다.

   

   MultiLineGrid.fla 응용 프로그램의 DataGrid

headerTextFormat 스타일을 사용하여 머리글 행의 텍스트 스타일을 설정할 수 있습니다. 다음 예제에서는 TextFormat 객체를 사용하여 headerTextFormat 스타일을 Arial 글꼴, 빨강 색상, 글꼴 크기 14 및 기울임체로 설정합니다.

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. [컨트롤] > [무비 테스트]를 선택하여 응용 프로그램을 실행합니다.