태터데스크 관리자

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

태터데스크 메시지

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

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

5. Value Object와의 바인딩을 사용한 데이터 수정

자 그럼 앞에서 사용한 예제4를 수정하여 아이템렌더러에서 데이터를 바꾸면 데이터그리드의 원본데이터도 같이 바뀌게함으로써 바로 데이터 수정이 이뤄지도록 코딩을 해보도록 하자.


첫 번째 구현 포인트는 바꾸어야 할 원본데이터의 인덱스 번호를 가져오는 것이 중요하다. 인덱스번호는 RendererVO no속성에서 가져오면 되므로, itemRenderer ComboBox에서 set data()함수를 오버라이드하여 데이터 값이 넘어 올 때 itemRenderer의 변수인 rdVO에 그 값들을 저장해 둔다. 그리고 아이템렌더러에서 isChecked속성이 바뀌면 그 인덱스 번호에 있는 ArrayCollection의 데이터값을 바꾸어 준다.


두 번째 구현 포인트는 아이템렌더러에서 상위 객체를 참조하는 방법이다. 아이템렌더러는 그 자체로 하나의 클래스이므로 상위 객체를 참조할 때는 약간의 요령이 필요하다. 여기서는 콤보박스에서 발생한 이벤트에서 상위객체의 참조 값을 타고 올라가도록 하였다.


즉 아이템렌더러 콤보박스의 값이 바뀌었을 때 발생한 event에서,

 

-         event.target은 콤보박스를 의미함

-         event.target.parentApplication RDExam2_5.mxml을 의미함

따라서 event.target.parentApplication initDG를 바꾸어 주면 데이터바인딩이 이루어서 이와 연결되 데이터그리드, 그리고 그 안에 있는 아이템렌더러의 값도 바꿀 수가 있게 되어 있다.

 

[예제5] RDExam2_5.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([

                   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 change="changeVO(event)">

                                              <mx:Script>

                                                     <![CDATA[

                                                            [Bindable] private var rdVO:RendererVO;

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

                                                                   rdVO = RendererVO(value);

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

                                                                         this.selectedIndex = 0;

                                                                   } else {

                                                                         this.selectedIndex = 1;

                                                                   }

                                                             }

                                                            private function changeVO(event:Event):void {

                                                                   trace(event.target.selectedLabel);

                                                                  var parentObj:Object = event.target.parentApplication;

                                                                  parentObj.initDG[rdVO.no] = new RendererVO(rdVO.no, event.target.selectedLabel);

                                                            }

                                                     ]]>

                                              </mx:Script>                                    

                                              <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

티스토리 툴바