태터데스크 관리자

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

태터데스크 메시지

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

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

4. Value Object를 사용한 itemRenderer

아이템에디터를 사용해서 데이터를 바꾸어주는 것에는 성공했지만 앞의 예제들을 실행해보면 약간 아쉬운 부분이 있다데이터를 바꾸어주고 반드시 포커스를 이동해주어야 화면의 데이터가 바뀌게 된다는 것이다콤보박스에서 데이터를 바꾸면 바로 반영이 되게 할 수는 없을까?


이렇게 구현하기 위해서는 Value Object와 데이터바인딩을 이용하면 간단히 해결할 수 있다구현을 위한 첫 단계로 예제1Value Object를 이용한 코드로 바꾸는 작업이 필요하다. [리스트1]은 예제1에서 사용한  {no:0, isChecked:"N"}식의 코드를RedererVO라는 클래스로 정의를 하였다여기서 중요한 것은 멤버변수를 선언할 때 [Bindable] public var의 형식으로 선언하는 것이다그래야만 나중에 속성들이 바뀌면 다른 객체에 바인딩된 값도 바뀌도록 구현할 수 있다.

 

[리스트1] RendererVO.as

package {

       public class RendererVO {

             [Bindable] public var no:Number;

             [Bindable] public var isChecked:String;

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

                    this.no = p_no;

                    this.isChecked = p_isChecked;

             }

       }

}

 

 

예제4 RendererVO라는 객체를 ArraryCollection으로 정의하여 이를 데이터그리드의 dataProvider속성으로 사용하여 아이템렌더러를 구현하였다. {no:0, isChecked:"N"} new RendererVO(0, "N")은 객체 인스턴스명은 틀리지만 내부의 속성들은 같기 때문에 이 데이터 구조를 사용하는 데이터그리드에서는 달리 바꿀 내용은 없다.

 

[예제4] RDExam2_4.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"

       xmlns:comp="*"

       >

    <mx:Script>

        <![CDATA[

        import mx.collections.ArrayCollection;

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

                   new RendererVO(0, "N"),             

                   new RendererVO(1, "Y"),

                   new RendererVO(2, "N"),

                   new RendererVO(3, "N"),

                   new RendererVO(4, "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>


 

Posted by okgosu

티스토리 툴바