안녕하세요~!

간만에 글을 쓰게 되네요;

다름이 아니라 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
Flex(AS3.x) 에서는 ( 물론 Flex에서만이 아닐수도 있습니다 ^^;; )

간단하게 소숫점 이하의 자리들을 처리 할수가 있습니다.

예를 들어 Number형으로 계산되었을때 10.123123 이라는 수를

소숫점 2번째 자리까지만 표시 하려고 할때 여러가지 방법이 있겠지만,

가장 간단하게 Number의 toFixed()라는 속성을 사용하는 방법입니다.


public function test() : void
{
var num:Number = 123.12312312312;

trace( "fixed 1 : " + num.toFixed( 1 ) );
trace( "fixed 2 : " + num.toFixed( 2 ) );
trace( "fixed 3 : " + num.toFixed( 3 ) );
trace( "fixed 4 : " + num.toFixed( 4 ) );
trace( "fixed 5 : " + num.toFixed( 5 ) );
trace( "fixed 6 : " + num.toFixed( 6 ) );
trace( "fixed 7 : " + num.toFixed( 7 ) );
trace( "fixed 8 : " + num.toFixed( 8 ) );
trace( "fixed 9 : " + num.toFixed( 9 ) );
trace( "fixed 10 : " + num.toFixed( 10 ) );
trace( "fixed 11 : " + num.toFixed( 11 ) );
trace( "fixed 12 : " + num.toFixed( 12 ) );

}



위의 방법 처럼 trace를 찍었을 경우 나오는 결과는  아래와 같습니다.

fixed 1 : 123.1
fixed 2 : 123.12
fixed 3 : 123.123
fixed 4 : 123.1231
fixed 5 : 123.12312
fixed 6 : 123.123123
fixed 7 : 123.1231231
fixed 8 : 123.12312312
fixed 9 : 123.123123123
fixed 10 : 123.1231231231
fixed 11 : 123.12312312312
fixed 12 : 123.123123123120


 소숫점 이하 11자리의 수를 사용했을때의 결과 값입니다.

 마지막에 fiexed 12의 결과 값을 보시면 끝에 "0"라는 숫자가 추가 되었음을 알수있습니다. ^^;

무조건 12자리로 표시하는거죠.

즉 소숫점 이하 한자리의 수를 toFiexed()를 이용해 10자리 까지 찍는다면 나머지 9 자리는 "0"으로

표시 될껍니다. 참고로 리턴되는 데이터 형식은 String 형입니다.


-- 태클 또는 내용 추가 , 트랙백 언제나 환영입니다 ^^ --
크리에이티브 커먼즈 라이센스
Creative Commons License
2010/04/13 10:28 2010/04/13 10:28
어떤 언어든지 NumberFormatter이 있거나 또는 Formatter이 있지만,

Flex에서는 아주 쉽게 천단위에 컴마( , ) 를 찍을수 있습니다.

ActionScript를 이용하는 방법입니다.

private function test() : void
{
var numberFormatter:NumberFormatter = new NumberFormatter();
numberFormatter.useThousandsSeparator = true;

//numberFormatter.format(value:Object):String
trace( numberFormatter.format( 10000000 ) );

}



numberFormatter.format( value:Object ):String 처럼 format() 라는 속성을 이용하시면 쉽게

천단위에 컴마를 찍을수 있습니다. 데이터가 String형이든 Integer 또는  Number이던 상관이 없습니다.

value를 Object형으로 받아서 String형으로 리턴 해주기 때문이죠 ^^

-- 태클 또는 추가 , 트랙백 언제나 환영입니다 ^^ --
크리에이티브 커먼즈 라이센스
Creative Commons License
2010/04/13 10:15 2010/04/13 10:15
블로그 이미지

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