2008. 10. 2. 21:01

[Flex 3][Flex 4] AdvancedDataGrid 컨트롤 / About the AdvancedDataGrid control

reference : 
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7bf0.html

Advanced Data Grid Controls and Automation Tools > Using the AdvancedDataGrid Control > About the AdvancedDataGrid control

AdvancedDataGrid 컨트롤은 데이터의 시각화를 향상시키기 위해 표준 DataGrid 컨트롤의 기능을 확장한 것입니다. 아래의 테이블은 AdvancedDataGrid 컨트롤의 주요 데이터 시각화 기능을 설명하고 있습니다:

기능

설명

복수의 열에 의한 정렬
(Sorting by multiple columns)

열의 헤더를 클릭하면 여러 개의 열에 의해 정렬됨. 자세한 내용은 Sorting by multiple columns 에서 볼 수 있습니다.

행과 열의 스타일 변경
(Styling rows and columns)

styleFunction 속성을 사용하여 컨트롤의 열이나 행에 스타일을 적용하는 함수를 명시할 수 있습니다. 자세한 내용은 Styling rows and columns 에서 볼 수 있습니다.

계층적이고 그룹화된 데이터 표시
(Displaying hierarchical and grouped data)

컨트롤에서 보이는 행을 제어하기 위해 컬럼에 확장 가능한 네비게이션 트리를 사용할 수 있습니다. 자세한 정보는 Hierarchical and grouped data display 에서 볼 수 있습니다.

열 그룹 생성
(Creating column groups)

하나의 열 헤더 아래에 여러 개의 열을 둘 수 있습니다. 자세한 내용은 Creating column groups 를 참조하시길 바랍니다.

Item renderer 사용
(Using item renderers)

item renderer 를 사용하여 여러 열을 펼칠 수도 있고, 같은 열에서 여러 item renderer 를 사용할 수도 있습니다. 자세한 정보는 Using item renderers with the AdvancedDataGrid control.를 참조하시길 바랍니다.

데이터 계층과 데이터 그룹의 표시
Displaying hierarchical and grouped data

AdvancedDataGrid 컨트롤의 가장 중요한 점 중 하나는 계층적인 데이터와 데이터 그룹의 표시를 지원하는 것이다. 계층적 데이터는 상하위 데이터 아이템의 구조로 된 데이터를 말합니다. 그룹화된 데이터는 계층이 없는 수평적인 데이터입니다. AdvancedDataGrid 컨트롤에 수평적인 데이터를 주기 전에, 수평적 데이터를 계층으로 묶기 위해 사용되는 하나 이상의 데이터 필드를 명시해야 합니다.

데이터 계층과 데이터 그룹의 표시를 지원하기 위해 AdvancedDataGrid 컨트롤은 데이터 계층을 볼 수 있는 열에서 내버게이션 트리를 보여줍니다. 아래의 예제는 첫 번째 열에 내버게이션 트리가 있는 AdvancedDataGrid 컨트롤을 보여줍니다. 내버게이션 트리는 어떤 열에도 위치할 수 있습니다:

AdvancedDataGrid control with a navigation tree in the first column

DataGrid 컨트롤을 AdvancedDataGrid 컨트롤로 수정
Migrating from the DataGrid control

이 페이지에서 설명하고 있는 AdvancedDataGrid 컨트롤의 많은 기능과 함께 아래의 속성이 추가되었습니다:

firstVisibleItem 

AdvancedDataGrid 컨트롤의 첫 행에서 보여지는 아이템.

컨트롤의 모든 속성과 메쏘드는 Adobe Flex Language Reference 에서 볼 수 있습니다.

현재 어플리케이션의 DataGrid 컨트롤을 AdvancedDataGrid 컨트롤로 수정할 때 고려해야 할 점은 AdvanceDataGrid 컨트롤에서 발생하는 많은 이벤트 객체의 데이터 타입이 DataGrid 컨트롤에서 사용하는 DataGridEvent 가 아니라 AdvancedDataGridEvent 라는 것입니다. 어플리케이션이 이벤트 객체를 타입으로 참조한다면 어플리케이션이 바른 데이터 타입을 사용하도록 갱신해야 합니다.

이벤트 객체의 타입을 정하려면, Adobe Flex Language Reference 를 참조하십시오.

예제: 열 그룹 생성
Example: Creating column groups

열 그룹은 하나의 대표 열 아래에 여러 개의 열을 두는 것을 가능하게 합니다. 아래의 예제는 Reveneus 열 아래에 Actual 과 Estimate 열이 그룹으로 묶인 모습을 보여줍니다:

The Actual and Estimate columns grouped under the Revenues column

AdvancedDataGrid 컨트롤은 mx.controls.AdvancedDataGrid 클래스와 mx.controls.advancedDataGridClasses 패키지 안의 여러 클래스에 의해 정의됩니다. 이 패키지는 열을 정의할 때 사용되는 AdvancedDataGridColumn 클래스도 포함하고 있습니다.

아래의 코드는 위의 그림에서 보여준 열 그룹을 생성합니다:

<?xml version="1.0"?> <!-- dpcontrols/adg/ColumnGroupADG.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; // AdvancedDataGrid 컨트롤에서 사용되는 데이터 임포트. include "SimpleFlatData.as"; ]]> </mx:Script>

<mx:AdvancedDataGrid id="myADG" dataProvider="{dpFlat}" width="100%" height="100%"> <mx:groupedColumns> <mx:AdvancedDataGridColumn dataField="Region"/> <mx:AdvancedDataGridColumn dataField="Territory"/> <mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="Territory Rep"/> <mx:AdvancedDataGridColumnGroup headerText="Revenues"> <mx:AdvancedDataGridColumn dataField="Actual"/> <mx:AdvancedDataGridColumn dataField="Estimate"/> </mx:AdvancedDataGridColumnGroup> </mx:groupedColumns> </mx:AdvancedDataGrid> </mx:Application>


위 예제를 실행한 SWF 파일은 아래와 같습니다:



이 예제는 SimpleFlatData.as 라는 이름의 파일에서 AdvancedDataGrid 컨트롤에서 사용되는 데이터를 임포트합니다. Hierarchical and grouped data display 에서 파일의 내용을 볼 수 있습니다.