태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
김대중 전 대통령 서거 추모글 남기기

예제로 배우는 Flex2009.04.20 02:40

아이템렌더러의 응용

그동안 2회에 걸쳐서 아이템렌더러와 아이템에디터, 아이템렌더러에서 데이터바인딩을 이용하여 데이터를 다루는 법을 살펴보았다. 이번 호는 아이템렌더러의 응용편으로 체크박스와 라디오버튼을 컨트롤하는 방법과 데이터그리드 컬럼의 헤더렌더러와 아이템렌더러를 이용하여 멀티로우 기능을 구현해보도록 하자.

 

1. 체크박스 아이템렌더러를 이용한 전체선택/해제 기능 구현

예제1은 체크박스를 아이템렌더러로 사용하여 데이터그리드의 모든 컬럼을 선택표시를 제어할 수 있도록 구현하였다.

아이템렌더러의 데이터와 데이터그리드의 데이터 바인딩을 위하여 [리스트1]과 같이 RendererVO2클래스를 사용하여 데이터를 iniDG라는 ArrayCollection으로 표현하였다. RendererVO2 no isChecked라는 두 가지의 속성으로 구성되어 있다.


그리고 전체선택 및 해제를 위한 함수로 checkAll()이라는 함수에서 initDG 어레이콜렉션의 길이만큼 반복하면서 RenderVO객체의 체크속성을 ‘Y’또는 ‘N’로 바꾸어 준다. initDG는 이미 데이터그리드와 아이템렌더러에 바인딩되어 있기 때문에 이 값만 바꾸어주면 체크박스의 선택여부가 전환된다.


체크박스 아이템렌더러에서는 set data()함수를 오버라이딩하여 parentDocument에서 넘겨주는 데이터(RenderVO2)를 받아서 체크여부를 표시해준다.

 

[예제1] RDExam3_1.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="450" height="370"

    verticalScrollPolicy="off" horizontalScrollPolicy="off" backgroundColor="#FFFFFF">

    <mx:Style>

        global { font-size:12}

    </mx:Style>

    <mx:Script>

        <![CDATA[

            import mx.collections.ArrayCollection;

            [Bindable] public var initDG:ArrayCollection = new ArrayCollection([

                new RendererVO2(0, "N"),             

                new RendererVO2(1, "Y"),

                new RendererVO2(2, "N"),

                new RendererVO2(3, "N"),

                new RendererVO2(4, "Y")]);

           

            private var flag:Boolean = false;

            private function checkAll():void {

                if(flag) {

                    flag = false;

                } else {

                    flag = true;

                }

                for(var idx:uint=0; idx<initDG.length; idx++) {

                    initDG[idx] = new RendererVO(idx, flag ? "Y" : "N");                                   

                }

            }

        ]]>

    </mx:Script>

    <mx:DataGrid id="myGrid" dataProvider="{initDG}" width="450" height="150" editable="false">   

        <mx:columns>

            <mx:DataGridColumn headerText="no" dataField="no" width="150"/>

            <mx:DataGridColumn headerText="isChecked" dataField="isChecked" width="150"/>

            <mx:DataGridColumn dataField="isChecked" headerText="itemRenderer">

                <mx:itemRenderer>

                    <mx:Component>

                        <mx:CheckBox click="changeVO(event)">

                            <mx:Script>

                                <![CDATA[

                                    [Bindable] private var rdVO:RendererVO2;

                                    override public function set data(value:Object):void {

                                        rdVO = RendererVO2(value);

                                        if(value.isChecked == "Y") {

                                            this.selected = true;

                                        } else {

                                            this.selected = false;

                                        }

                                     }

                                    private function changeVO(event:Event):void {

                                        trace(event.target.selected ? "Y" : "N");

                                        var parentObj:Object = event.target.parentApplication;

                                        parentObj.initDG[rdVO.no] = new RendererVO2(rdVO.no, event.target.selected ? "Y" : "N");

                                    }

                                ]]>

                            </mx:Script>                           

                        </mx:CheckBox> 

                    </mx:Component>

                </mx:itemRenderer>

            </mx:DataGridColumn>

        </mx:columns>       

    </mx:DataGrid>   

    <mx:Button label="전체선택/해제" click="checkAll()"/>

</mx:Application>

 

 

[리스트1] RendererVO2.as

package {

    public class RendererVO2 {

        [Bindable] public var no:Number;

        [Bindable] public var isChecked:String;

        public function RendererVO2(p_no:Number, p_isChecked:String) {

            this.no = p_no;

            this.isChecked = p_isChecked;

        }

    }

}

 

 

[그림1] 체크박스 아이템렌더러를 이용한 전체 선택/해제 기능 구현


Posted by okgosu

댓글을 달아 주세요

  1. chery

    좋은 정보 감사합니다 ^^ 강좌보고 해결이 되었어요.. ㅠㅠ 아.. 힘들다 힘들어~

    2009.05.06 15:27 [ ADDR : EDIT/ DEL : REPLY ]
  2. 난다오

    for(var idx:uint=0; idx<initDG.length; idx++) {
    initDG[idx] = new RendererVO(idx, flag ? "Y" : "N";);
    }

    ==>

    for(var idx:uint=0; idx<initDG.length; idx++) {
    initDG[idx] = new RendererVO2(idx, flag ? "Y" : "N";);
    }

    2009.09.25 17:00 [ ADDR : EDIT/ DEL : REPLY ]
  3. 연습생

    위의 예제에서는 ArrayCollection을 구성하여 그 곳의 값을 가져와 체크박스를 구현했는데요,
    array에 직접 값을 입력하지 않고, .net에서 만든 xml DataSet의 값을 이용하려면 어떻게 하면 될까요?
    그리고 따로 as파일을 안만들고는 안될까요?

    2010.03.22 16:07 [ ADDR : EDIT/ DEL : REPLY ]