itemEditor 이해와 커스텀 itemEditor 만들어보기

데이터 그리드에서 편집기능을 사용할때 우리는 보통 editable 속성값을 true 로 셋팅한것만으로 편하게

바인딩된 원 데이터를 마음대로 수정이 가능했습니다.

 

또 다른 방법으로 우리는 itemEditor 를 일반적인 컨트롤 컴포넌트들의 클래스 네임을 적어줌으로서 편하게(?) 작업이 가능했습니다.

 

하지만 그보다 복잡한 형태의 itemEditor 을 사용해야한다면 어떻게 해야할까?

 

아래 소스는 가장 복잡한 형태의 커스텀 itemEditor 을 사용함으로서 itemEditor 가 갖추어야할것들을 모두 표시 해주고 있습니다.

소스는 itemEditor 의 베이스 클래스를 HBOX 로 선언해주었습니다.

 

실제 itemEditor 가 기본적으로 갖추어야 할 것은

 

mx.controls.listClasses.IDropInListItemRenderer 인터페이스와

get listData , set listData

 

속성입니다. 그리고 set Data 에서의

 

dispatchEvent(new FlexEcent(FlexEvent.DATA_CHANGE)); 와 listData 의 [Bindable("datachange")] 또한

 

필수 입력 사항들입니다. 그렇다면 왜? 이것들이 필요한것일까? 이유는 간단합니다.

이미 IDropInListItemmRenderer 의 인터페이스를 가진 컨트롤들은 이미 선언이 되어 있기 때문입니다.

 

위의 내용들은 해당 컴포넌트가 ItemRenderer 또는 ItemEditor 에 사용되었을경우 ListBase 로 부터 데이터를 가져오기 위해

선언된 것일 뿐입니다.

 

레퍼런스의 IDropInListItemmRenderer 를 찾아보면 좀 더 자세한 설명을 얻으실수 있습니다.

 

DataGridColumn 쪽을 살펴보면 editorDataField = 'text' 라고 적혀있습니다. text 는 기본값이지만 설명을 위해 적어 두었습니다.

editorDataField 는 데이터의 필드가 아닌 itemRenderer , itemEditor 간의 데이터 통신을 위한 속성을 지칭하는것입니다.

 

우리는 기본컨트롤과의 통신을 위해 text 속성을 그대로 유지하고 바꾸지는 않겠습니다.

 

아래 보시면 set text 와 get text 가 보일겁니다. set text는 여기서 전혀 사용되지않지만 get text 는 itemRenderer 로 데이터를

보내주기 위해 콤보박스의 text 값을 보내주게 만들었습니다.

 

이전에 itemRenderer 를 설명할때

listData -> set data -> set text  로 실행된다고 하였지만. 그것은 IDropInListItemmRenderer 인터페이스를 가진

기본적인 컨트롤들의 set data 내부에서 set text 를 호출하였지만. 우리가 만든 커스텀 itemEditor 에는 그럴필요가 없기에

그냥 두었습니다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 <mx:Script>
  <![CDATA[

   import mx.collections.ArrayCollection;
   import mx.utils.ObjectUtil;
   
   [Bindable] private var dataSet:ArrayCollection = new ArrayCollection([
    {label:"http://blog.naver.com/mash9"},
    {label:"blog"},
    {label:"naver"},
    {label:"com"},
    {label:"mash9"}
   ]);
   
   [Bindable] public var combo:ArrayCollection = new ArrayCollection(ObjectUtil.copy(dataSet.source) as Array);
  ]]>
 </mx:Script>

 <mx:DataGrid id="grid" width="300" dataProvider="{dataSet}" editable="true">
  <mx:columns>
   <mx:DataGridColumn dataField="label" editorDataField="kkkk">
    <mx:itemEditor>
    <mx:Component>
     <mx:HBox implements="mx.controls.listClasses.IDropInListItemRenderer">
      <mx:Script>
       <![CDATA[
        import mx.controls.Alert;
        
        import mx.events.FlexEvent;
        import mx.controls.listClasses.BaseListData;
        
        private var property:String;
        
        override public function set data(value:Object):void
        {
         super.data = value;
         
         for(var i:Number = 0 ; i < cb.dataProvider.length ; i++)
             if(cb.dataProvider[i][property] == value[property])
             {
              cb.selectedIndex = i;
              break;
             }
         
         dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
        }
        
        [Bindable("dataChange")]
        private var _listData:BaseListData;
        
        public function get listData():BaseListData
           {
             return _listData;
           }
          
           public function set listData(value:BaseListData):void
           {
            property = value["dataField"];
         _listData = value;
           }
          
           public function set kkkk(value:String):void
           {
            //"not use"
           }
          
           public function get kkkk():String
           {
            return cb.text;
           }   
        
       ]]>
      </mx:Script>
      <mx:Label text="select:"/>
      <mx:ComboBox id="cb" dataProvider="{outerDocument.combo}"/>
     </mx:HBox>  
    </mx:Component>
    </mx:itemEditor>
   </mx:DataGridColumn>
  </mx:columns>
 </mx:DataGrid>

</mx:Application>


출처 : http://blog.naver.com/mash9 블로그 닫힌문님