SelectionDataGrid
Openzet.org
목차 |
소개
TreeDataGrid 클래스를 상속하고 ICellSelectable 인터페이스를 구현한 클래스로서 enableDragSelection 속성을 정의해, 이 속성이 true일 경우 데이터그리드 셀을 마우스로 드래그 선택할 수 있는 기능을 제공하는 커스텀 클래스이다. 이 클래스는 또한 데이터그리드의 컨텍스트 메뉴를 통해 드래그 선택된 영역이 있을 경우, 해당 영역을 팝업 형태의 차트로 볼 수 있는 기능을 제공하고 있습니다. 드래그 선택된 셀의 영역을 원하는 차트 형태로 보기 위해서는 seriesType 속성을 사용하면 되는데, 이 속성의 디폴트 값은 ColumnSeries로, 기본적으로 SelectionDataGrid는 컬럼 시리즈 형태로 차트를 보여주게 된다.
아울러 SelectionDataGrid 클래스는 ICellSelectable 인터페이스에 따라 dragSelectionData 속성을 가지고 있으며, 이 속성의 값은 드래그 선택된 데이터 그리드 셀들의 값과 일치한다. dragSelectionData 속성의 값은 데이터그리드의 셀을 드래그 선택한 후 해당 값들을 다른 컨트롤 (예컨대, 차트 컨트롤)에 드랍해 데이터바인딩 기능을 구현하는 데 편리하게 사용될 수 있다.
아울러 항상 지정해 주어야 하는 것은 아니지만, SelectionDataGrid 클래스에서는 xField 속성을 제공하고 있는데, 이 속성은 팝업 형태로 차트를 보여줄 때 차트 시리즈의 xField에 사용할 데이터 필드의 값을 지정하기 위한 속성이다. 이 속성을 지정하지 않으면, 팝업 형태의 차트에 보이는 xField의 값이 이상한 숫자값이 될 수 있다. 이 속성의 디폴트 값은 null이다.
속성
enableDragSelection 마우스로 데이터그리드의 셀을 드래그해 선택이 가능한지 여부를 지정하는 속성이다. 디폴트 값은 true이다.
seriesType 데이터그리드의 컨텍스트 메뉴에서 show chart를 선택할 경우, 팝업으로 보여줄 차트의 시리즈 타입을 결정하는 속성이다. 디폴트 값은 ColumnSeries이고,ColumnSeries, LineSeries, BarSeries, AreaSeries 중 하나를 값으로 지정할 수 있다.
사용법
SelectionDataGrid 클래스의 사용법은 다음 예제를 참고하면 된다. 이 클래스는 내부적으로 많은 로직을 처리하기 때문에, 개발자 단에서 특별한 설정은 필요로하지 않는다. 아래 예제에서는, 컨텍스트 메뉴를 통해 트리거되는 팝업 차트 시리즈의 종류를 BarSeries로 정하고 있다.
SelectionDataGrid 클래스의 enableDragSelection 속성의 디폴트 값은 true이다.
<zet:SelectionDataGrid seriesType="BarSeries" id="dg" width="100%" height="100%">
<zet:columns>
<mx:DataGridColumn dataField="A" textAlign="right" />
<mx:DataGridColumn dataField="B" textAlign="right" />
<mx:DataGridColumn dataField="C" textAlign="right" />
<mx:DataGridColumn dataField="D" textAlign="right" />
</zet:columns>
</zet:SelectionDataGrid>
애플리케이션 예제
다음은 이 클래스에 대한 애플리케이션 예제 소스 코드이다.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:zet="org.openzet.controls.*" layout="horizontal" creationComplete="initApp();">
<mx:Script>
<![CDATA[
import mx.charts.series.LineSeries;
import mx.events.AdvancedDataGridEvent;
import mx.events.DataGridEvent;
import mx.charts.series.ColumnSeries;
import mx.charts.chartClasses.Series;
import mx.core.UIComponent;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
import flash.utils.*;
import mx.charts.series.ColumnSeries;
import org.openzet.controls.dataGridClasses.ICellSelectable;
private function initApp():void {
var arr:ArrayCollection = new ArrayCollection();
var len:Number = 30 + Math.round(Math.random()*50);
for (var i:int=0; i<len;i++) {
arr.addItem({});
arr[i].A= Math.random()*1000;
arr[i].B= Math.random()*1000;
arr[i].C= Math.random()*1000;
arr[i].D= Math.random()*1000;
}
dg.dataProvider = arr;
dg2.dataProvider = arr;
}
private function dragEnterHandler(event:DragEvent):void {
DragManager.acceptDragDrop(event.currentTarget as UIComponent);
}
private function dropHandler(event:DragEvent):void {
var arr:ArrayCollection = ICellSelectable(event.dragInitiator).dragSelectionData as ArrayCollection;
var fields:Array = cloneFields(arr);
var series:Array=[];
for (var i:int=0; i<fields.length;i++) {
var ser:ColumnSeries= new ColumnSeries();
ser.yField=fields[i];
ser.displayName = fields[i];
series.push(ser);
}
chart.dataProvider=arr;
chart.series=series;
}
private function cloneFields(value:ArrayCollection):Array {
var item:Object;
var fields:Array;
if (value && value.length >0) {
item = value[0];
fields = [];
for (var prop:String in item) {
fields.push(prop);
}
}
return fields;
}
]]>
</mx:Script>
<mx:VBox width="100%" height="80%">
<zet:AdvancedSelectionDataGrid rowHeight="30" enableDragSelection="true" seriesType="LineSeries" id="dg" width="100%" height="100%">
<zet:columns>
<mx:AdvancedDataGridColumn dataField="A" textAlign="right" />
<mx:AdvancedDataGridColumn dataField="B" textAlign="right" />
<mx:AdvancedDataGridColumn dataField="C" textAlign="right" />
<mx:AdvancedDataGridColumn dataField="D" textAlign="right" />
</zet:columns>
</zet:AdvancedSelectionDataGrid>
<zet:SelectionDataGrid seriesType="BarSeries" id="dg2" width="100%" height="100%">
<zet:columns>
<mx:DataGridColumn dataField="A" textAlign="right" />
<mx:DataGridColumn dataField="B" textAlign="right" />
<mx:DataGridColumn dataField="C" textAlign="right" />
<mx:DataGridColumn dataField="D" textAlign="right" />
</zet:columns>
</zet:SelectionDataGrid>
</mx:VBox>
<mx:ColumnChart id="chart" dragEnter="dragEnterHandler(event);" dragDrop="dropHandler(event);" width="100%" height="100%">
</mx:ColumnChart>
</mx:Application>
예제 실행 결과
