태터데스크 관리자

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

태터데스크 메시지

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

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

2. 콤보박스를 이용한 아이템에디터(ComboBox itemEditor)

아이템렌더러와 아이템에디터의 근본적인 차이점은 에디트모드로 작동할 때 드러난다 ComboBox를 아이템렌더러로 사용한 예제1은 화면에 콤보박스를 보여주기만 할 뿐 다른 변화는 없다그러나 예제2는 콤보박스를 아이템에디트로 설정하였기 때문에 처음 실행하면 일반 데이터그리드의 화면이지만 데이터그리드 컬럼을 클릭하여 에디트를 하려고 하면 콤보박스로 컬럼이 바뀌게 된다.


아이템에디터를 사용하기 위해서는 DataGrid editable속성을 true로 하고 <mx:itemEditor>에 아이템렌더러 처럼 코드를 넣어준다예제2를 실행하여 데이터를 편집한 다음 다른 곳으로 포커스를 이동하면 데이터가 바뀜을 알 수 있다.

 

[예제2] RDExam2_2.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="true">   

        <mx:columns>

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

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

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

                <mx:itemEditor>

                       <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:itemEditor>

            </mx:DataGridColumn>

        </mx:columns>       

    </mx:DataGrid>          

</mx:Application>

 

 

[그림2] 콤보박스 아이템에디터


Posted by okgosu

티스토리 툴바