'AdvancedDataGrid'에 해당되는 글 1건

  1. [2010/04/26] Flex AdvancedDataGrid 정렬 ( Sort ) 하기. (4)

안녕하세요~!

간만에 글을 쓰게 되네요;

다름이 아니라 AdvancedDataGrid를 사용할때 GroupingCollection 을 필수로 또는 필요로 사용하게 되는

경우가 생깁니다.

그런데 이녀석이 Sorting을 간혹 지멋대로 하는결과가 초래 되는데요,

이럴땐 SortField를 이용하여 원하는 필드를 지정하여 Sort시킬 수 있습니다.

자 우선~!

사용자 삽입 이미지
위의 결과를 보시면 비용(cost)  필드의 내용이 정렬이 되어 있지 않습니다.

사용자 삽입 이미지

요녀석을 보시면 비용(cost) 필드의 내용이 내림차순으로 정렬이 되어있군요~!

엇. 캡춰하는 도중에 필드를 하나 더 추가해버렸네요 ..^^;;

여튼, 간단한 방법으로 위의 내용을 정리해 보겠습니다.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

<mx:Script>
<![CDATA[
import mx.collections.Sort;
import mx.collections.SortField;
import mx.collections.ArrayCollection;

[Bindable]
private var ac:ArrayCollection = new ArrayCollection([
{group:"AA",name:"banana",cat:"fruit",cost:.99,qty:2},
{group:"AA",name:"bread",cat:"bakery",cost:1.99,qty:3},
{group:"AA",name:"cheddar cheese",cat:"dairy",cost:4.52,qty:6},
{group:"AA",name:"sour cream",cat:"dairy",cost:.33,qty:2},
{group:"AA",name:"orange",cat:"fruit",cost:.52,qty:4},
{group:"BB",name:"donut",cat:"bakery",cost:.33,qty:12},
{group:"BB",name:"non-fat yogurt",cat:"dairy",cost:1.99,qty:5},
{group:"BB",name:"milk",cat:"dairy",cost:2.99,qty:2},
{group:"BB",name:"apple",cat:"fruit",cost:1.05,qty:4},
{group:"BB",name:"colby cheese",cat:"dairy",cost:3.05,qty:4}
]);// as ArrayCollection;



private function adgSort() : void
{
var sortFields:Array = [ new SortField( "cost", false, false, false ) ];
var sort:Sort = new Sort();
sort.fields = sortFields;
adg.dataProvider.sort = sort;
adg.dataProvider.refresh();
adg.expandAll();
}


]]>
</mx:Script>

<mx:GroupingCollection id="myGroup" source="{ac}">
<mx:Grouping>
<mx:GroupingField name="group" />
</mx:Grouping>
</mx:GroupingCollection>


<mx:AdvancedDataGrid id="adg" width="500" height="500" dataProvider="{myGroup}" initialize="myGroup.refresh();" updateComplete="adgSort();">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name" />
<mx:AdvancedDataGridColumn dataField="cost" />
<mx:AdvancedDataGridColumn dataField="cat" />
<mx:AdvancedDataGridColumn dataField="qty" />
</mx:columns>
</mx:AdvancedDataGrid>

</mx:Application>



위의 소스코드를 보시면

private function adgSort() : void
            {
                var sortFields:Array = [ new SortField( "cost", false, false, false )  ];
                var sort:Sort = new Sort();
                sort.fields = sortFields;
                adg.dataProvider.sort = sort;
                adg.dataProvider.refresh();
                adg.expandAll();
            }

adgSort() 라는 함수를 볼수있습니다.

바로 이녀석이 오늘의 주인공이죠.

AdvancedDataGrid에 그룹되어 내용이 들어가기 위해서는

GroupingCollection 이라는 녀석을 사용하여 데이터를 그룹핑하고 그다음에 dataProvider를 사용하여

AdvancedDataGrid에 바인딩 시킵니다. 그러나 바인딩이 완료 되고나서 데이터가 틀어지는 현상이

가끔(?) 가다 생기므로 새로 정렬을 시켜주는거죠.

우선 adgSort()함수 내부에 있는 녀석들을 소개 하겠습니다.

 new SortField( 대상 데이터 네임 , 대소문자 구분  , 내림차순 , 숫자비교 ); <-- 이런 식으로 쓸수 있겠습니다.

 new SortField( "name" , false , true ); <-- 이런 식으로 쓰게 되면 "name"필드의 내용을 내림차순으로 정렬하게 되죠.

이렇게 Sort될 필드를 지정하고 이미 데이터의 내용이 바인딩 되어있는 AdvancdeDataGrid의 DataProvider에 접근하여 내용들을 다시 Sort해주는 방법입니다.

즉 순서로 보면  원본데이터 - > 그룹핑 - > AdvancedDataGrid에 데이터 바인딩 - > 바인딩 되면 바인딩 된 내용을 Sorting - > 데이터 Refresh - > 화면 표시.

약간은 복잡한 방법이 될수도 있겠습니다.

제가 아직 글쓰기에 능하지 않아서 앞뒤가 뒤죽 박죽 또는 이해하기 힘드실수도 있겠네요.ㅠㅠ

혹시나 이보다 더 좋은 방법을 알고 계시거나 제가 제시한 내용이 위험하다거나, 문제가 있을때는 "지적&태클" 부탁드립니다~!

역시나 트랙백도 감사하죠~ ^-^;
크리에이티브 커먼즈 라이센스
Creative Commons License
2010/04/26 14:28 2010/04/26 14:28
블로그 이미지

+_+/ Blank Your M.i.n.d_ -Blank