[Flex3] DataGrid 컨트롤 / DataGrid control

Reference : http://livedocs.adobe.com/flex/3/html/dpcontrols_6.html#396811

DataGrid 컨트롤은 데이터를 하나 이상의 열로 보여주는 리스트입니다. It is a formatted table of data that lets you set editable table cells, and is the foundation of many data-driven applications.

For information on the following topics, which are often important for creating advanced data grid controls, see:

• How to format the information in each DataGrid cell and control how users enter data in the cells; see Using Item Renderers and Item Editors.
• How to drag objects to and from the data grid; see Using Drag and Drop.

For complete reference information, see the Adobe Flex Language Reference.

About the DataGrid control
DataGrid 컨트롤

DataGrid 컨트롤은 아래와 같은 특징이 있습니다:

• 크기 조절 가능, 정렬 가능, 열에 대한 최적화 가능
• 행과 열의 헤더를 편집 가능
• 실행 시간에 열의 크기를 변경이나 순서 변경이 가능
• 선택 이벤트
• 열에 특정 아이템 렌더러 사용 가능
• 페이징 제공
• 스크롤 되지 않는 행과 열 제공

아래의 이미지는 DataGrid 컨트롤을 보여주고 있습니다:

행은 아이템을 보여주는 역할을 담당합니다. 각 행은 위의 행 아래에 세로로 배열됩니다. 

Creating a DataGrid control
DataGrid 컨트롤 생성

MXML 에서 <mx:DataGrid> 태그를 사용하여 DataGrid 컨트롤을 정의합니다. MXML, 다른 태그, ActionScript 블럭에서 컴포넌트를 참조하기 위해서는 id 값을 지정해야 합니다.

DataGrid 컨트롤은 리스트 기반의 데이터 프로바이더를 사용합니다. 더 많은 정보는 Using Data Providers and Collections 에서 살펴보십시오.

DataGrid 컨트롤의 데이터는 dataProvider 속성을 사용하여 나타낼 수 있습니다. 여러 가지 방법으로 데이터를 지정할 수 있습니다. DataGrid 컨트롤을 생성하는 가장 간단한 방법은 <mx:dataProvider> 의 하위 태그인 <mx:ArrayCollection> 을 사용하는 것입니다. ArrayCollection of Object 의 ArrayCollection 으로 엔트리를 정의하기 위해 <mx:Object> 태그도 함께 사용할 수 있습니다. 각 Object 는 DataGrid 컨트롤의 한 행을 정의하고, Object 의 속성은 열을 정의합니다:

<?xml version="1.0"?>
<!-- dpcontrols/DataGridSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:DataGrid> 
      <mx:ArrayCollection>
         <mx:Object>
            <mx:Artist>Pavement</mx:Artist>
            <mx:Price>11.99</mx:Price>
            <mx:Album>Slanted and Enchanted</mx:Album>
         </mx:Object>
         <mx:Object>
            <mx:Artist>Pavement</mx:Artist>
            <mx:Album>Brighten the Corners</mx:Album>
            <mx:Price>11.99</mx:Price>
         </mx:Object>
      </mx:ArrayCollection>
   </mx:DataGrid>
</mx:Application>

 

이 코드를 실행한 SWF 파일은 아래와 같습니다:

 



 

This example shows how you can take advantages of MXML defaults. You do not have to use an <mx:dataProvider> tag, because dataProvider is the default property of the DataGrid control. Similarly, you do not have to use an <mx:source> tag inside the <mx:ArrayCollection> tag because source is the default property of the ArrayCollection class. Finally, you do not have to specify an <mx:Array> tag for the source array.

You can also define the objects by using properties directly in the Object tags, as the following example shows:

<?xml version="1.0"?>
<!-- dpcontrols/DataGridSimpleAttributes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:DataGrid> 
      <mx:ArrayCollection>
         <mx:Object Artist="Pavement" 
            Album="Slanted and Enchanted" Price="11.99" />
         <mx:Object Artist="Pavement" 
            Album="Brighten the Corners" Price="11.99" />
      </mx:ArrayCollection>
   </mx:DataGrid>
</mx:Application>
The executing SWF file for the previous example is shown below:

The column names displayed in the DataGrid control are the property names of the Array Objects. By default, the columns are in alphabetical order by the property names. Different Objects can define their properties in differing orders. If an Array Object omits a property, the DataGrid control displays an empty cell in that row.

Specifying columns

Each column in a DataGrid control is represented by a DataGridColumn object. You use the columns property of the DataGrid control and the <mx:DataGridColumn> tag to select the DataGrid columns, specify the order in which to display them, and set additional properties. You can also use the DataGridColumn class visible property to hide and redisplay columns, as described in Hiding and displaying columns.

For complete reference information for the <mx:DataGridColumn> tag, see DataGridColumn in the Adobe Flex Language Reference.

You specify an Array element to the <mx:columns> child tag of the <mx:DataGrid> tag, as the following example shows:

<?xml version="1.0"?>
<!-- dpcontrols/DataGridSpecifyColumns.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
   <mx:DataGrid> 
      <mx:ArrayCollection>
         <mx:Object Artist="Pavement" Price="11.99" 
            Album="Slanted and Enchanted" />
         <mx:Object Artist="Pavement" 
            Album="Brighten the Corners" Price="11.99" />
      </mx:ArrayCollection>
      <mx:columns>
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn dataField="Price" />
      </mx:columns>
   </mx:DataGrid>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you only display the Album and Price columns in the DataGrid control. You can reorder the columns as well, as the following example shows:

<mx:columns>
    <mx:DataGridColumn dataField="Price" />
    <mx:DataGridColumn dataField="Album" />
</mx:columns>

In this example, you specify that the Price column is the first column in the DataGrid control, and that the Album column is the second.

You can also use the <mx:DataGridColumn> tag to set other options. The following example uses the headerText property to set the name of the column to a value different than the default name of Album, and uses the width property to set the album name column wide enough to display the full album names:

<mx:columns>
    <mx:DataGridColumn dataField="Album" width="200" />
    <mx:DataGridColumn dataField="Price" headerText="List Price" />
</mx:columns>

Hiding and displaying columns

If you might display a column at some times, but not at others, you can specify the DataGridColumn class visible property to hide or show the column. The following example lets you hide or show the album price by clicking a button:

<?xml version="1.0"?>
<!-- dpcontrols/DataGridVisibleColumn.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
   <mx:DataGrid id="myDG" width="350"> 
      <mx:dataProvider>
         <mx:ArrayCollection>
            <mx:source>
               <mx:Object Artist="Pavement" Price="11.99" 
                  Album="Slanted and Enchanted" />
               <mx:Object Artist="Pavement" 
                  Album="Brighten the Corners" Price="11.99" />
            </mx:source>
         </mx:ArrayCollection>
      </mx:dataProvider>
      <mx:columns>
         <mx:DataGridColumn dataField="Artist" />
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn id="price" dataField="Price" visible="false"/>
      </mx:columns>
   </mx:DataGrid>

   <!-- The column id property specifies the column to show.-->
   <mx:Button label="Toggle Price Column" 
      click="price.visible = !price.visible;" />
</mx:Application> 
The executing SWF file for the previous example is shown below:

Passing data to a DataGrid control

Flex lets you populate a DataGrid control from an ActionScript variable definition or from a Flex data model. The following example populates a DataGrid control by using a variable:

<?xml version="1.0"?>
<!-- dpcontrols/DataGridPassData.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
   initialize="initData()">
   <mx:Script>
   <![CDATA[
      import mx.collections.*;
      private var DGArray:Array = [
         {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
         {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}];
         
      [Bindable]
      public var initDG:ArrayCollection;
      //Initialize initDG ArrayCollection variable from the Array.
      //You can use this technique to convert an HTTPService, 
      //WebService, or RemoteObject result to ArrayCollection.
      public function initData():void {
         initDG=new ArrayCollection(DGArray);
      }
   ]]>
   </mx:Script>

   <mx:DataGrid id="myGrid" width="350" height="200" 
      dataProvider="{initDG}" >
      <mx:columns>
         <mx:DataGridColumn dataField="Album" />
         <mx:DataGridColumn dataField="Price" />
      </mx:columns> 
   </mx:DataGrid>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, you bind the variable initDG to the <mx:dataProvider> property. You can still specify a column definition event when using data binding. For a description of using a model as a data provider, see Populating a ComboBox control by using variables and models