태터데스크 관리자

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

태터데스크 메시지

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

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

다양한 렌더러의 적용

지난 번에는 다양한 렌더러의 개념과 렌더러를 기본적인 사용방법을 살펴보았다이번에는 데이터그리드에 자주사용되는ComboBox에서 렌더러의 사용방법과 itemRenderer, itemEditor의 사용방법을 예제를 통해 알아보고액션스크립트 클래스에 데이터를 담아서 itemRenderer에 바인딩하는 예제를 살펴보자.

 

1. 콤보박스를 이용한 아이템렌더러(ComboBox itemRenderer)

콤보박스에서 아이템렌더러의 사용시 가장 중요한 것은 콤보박스가 가지는 데이터의 값에 맞는 데이터가 선택되도록 하는 것이다예제1에서는 데이터그리드의 세번째 컬럼에 itemRenderer를 사용하여 ComboBox를 나타나게 하였다.


데이터그리드는 no, isCheceked로 구성된 객체의 배열을 데이터로 사용하며, isChecked값이 세번째 컬럼의 dataField속성으로 설정되어 있다데이터그리드에서 넘겨주는 isChecked값은 itemRenderer에서는 data.isChecked라는 값으로 데이터를 가져올 수 있다그리고 콤보박스에서는 삼항연산자식을 사용하여 data.isChecked의 값이 Y인지 N인지를 체크하여 해당하는 인덱스가 체크되도록 하고 있다.

 

[예제1] RDExam2_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:Script>

        <![CDATA[

        import mx.collections.ArrayCollection;

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

                         {no:0, isChecked:"N"},

                         {no:1, isChecked:"Y"},

                         {no:2, isChecked:"N"},

                         {no:3, isChecked:"N"},

                         {no:4, isChecked:"Y"}]);

        ]]>

    </mx:Script>

    <mx:DataGrid id="myGrid" dataProvider="{initDG}" width="450" height="300" 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:ComboBox selectedIndex="{data.isChecked=='Y'? 0:1}">

                                           <mx:dataProvider>

                                              <mx:Object label="Y" data="Y"/>

                                              <mx:Object label="N" data="N"/>

                                           </mx:dataProvider>

                                        </mx:ComboBox>                                      

                                 </mx:Component>

                           </mx:itemRenderer>

                    </mx:DataGridColumn>

        </mx:columns>      

    </mx:DataGrid>      

</mx:Application>

 

[그림1] 콤보박스 아이템렌더러


Posted by okgosu

티스토리 툴바