쉬어가더라도 멈추지마..

데이터 그리드에서 편집기능을 사용할때 우리는 보통 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 에는 그럴필요가 없기에

그냥 두었습니다.

   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 블로그 닫힌문님

ListBase기반의 콤포넌트중 List 콤포넌트의 대한 간단한 예제이다.
아래 내용중에 참고해야될 부분이 빨간색부분 event.itemRenderer.data.url1  이다.
List콤포넌트에 dataProvider 로 ArrayCollection을 바인딩시킨후 ListEvent이벤트를 통해서
List콤포넌트에 바인딩된 dataProvider의 데이타 접근할수가 있다.
ListBase계열을 상속받은 콤포넌트들은 ListBase의 data라는 프로퍼티를통해서 원시데이타에 접근할수있기때문이다.
따라서 itemRednderer.data 는 하나의 item을 가르키게 되고 원하는값을 뽑아낼수있다.

Datagrid나 Tree역시 비슷하다..


<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="500">
<mx:Script>
        <![CDATA[                    
            [Bindable]
            [Embed(source='assets/m2.jpg')]
            private var m1:Class; 
            
            [Bindable]
            [Embed(source='assets/m2.jpg')]
            private var m2:Class;
            
            [Bindable]
            [Embed(source='assets/m3.jpg')]
            private var m3:Class;
     
            import mx.events.ListEvent;            
            private function fnRollOver(event:ListEvent):void {
             sLoader.source= event.itemRenderer.data.url1;
            }

            private function fnRollOut(event:ListEvent):void {
                sLoader.source=""
            }  
                            
       ]]>
</mx:Script>

<mx:ArrayCollection id="dpd">
    <mx:source>  
       <mx:Object label="오만과 편견" icon="{m1}" url1="http://imgmovie.naver.com/mdi/mit500/0447/D4728-00.jpg" />
       <mx:Object label="캐리비안의 해적" icon="{m2}" url1="http://imgmovie.naver.com/mdi/mit500/0436/D3679-01.jpg"/>
       <mx:Object label="러브 액츄얼리" icon="{m3}" url1="http://imgmovie.naver.com/mdi/mit500/0368/C6843-00.jpg"/>   
     </mx:source>
</mx:ArrayCollection>

<mx:List id="lData"
 dataProvider="{dpd}"
 width="230"
 itemRollOut="fnRollOut(event);"
 itemRollOver="fnRollOver(event);"
 fontSize="12"
  height="71"/>
<mx:SWFLoader id="sLoader" width="230" height="330"/> 
</mx:Application> 

[Bindable]
private var dpADG:ArrayCollection = new ArrayCollection([
    {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
    {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99},
    {Artist:'Saner', Album:'A Child Once', Price:11.99},
    {Artist:'Saner', Album:'Helium Wings', Price:12.99},
    {Artist:'The Doors', Album:'The Doors', Price:10.99},
    {Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
    {Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
    {Artist:'Grateful Dead', Album:'In the Dark', Price:11.99},
    {Artist:'Grateful Dead', Album:'Shakedown Street', Price:11.99},
    {Artist:'The Doors', Album:'Strange Days', Price:12.99},
    {Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
]); 


  public function myColStyleFunc(data:Object,
            col:AdvancedDataGridColumn):Object
         {
             if(data["Price"] <= 11.00)
                 return {color:0x00FF00};

             return null;
         }         


  <mx:AdvancedDataGridColumn dataField="Price"
                styleFunction="myColStyleFunc"/>

<?xml version="1.0"?>
<!-- dpcontrols/adg/HierarchicalADGSimpleRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="150">

    <mx:Script>
        <![CDATA[
              import mx.collections.ArrayCollection;
              
                [Bindable]
         public var OrexhComboData:ArrayCollection = new ArrayCollection(
                [
                 {Region:"CICAGO", Territory_Rep:10,Actual:10,Estimate:20},
                 {Region:"SEOUL", Territory_Rep:100,Actual:100,Estimate:10},
                 {Region:"TEXAS", Territory_Rep:10,Actual:12,Estimate:34}
                ] );  
              
        ]]>
    </mx:Script>

    <mx:AdvancedDataGrid width="100%" height="100%" dataProvider="{OrexhComboData}" sortExpertMode="true">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Region" width="70"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep" width="100"/>
            <mx:AdvancedDataGridColumn dataField="Actual" width="70"/>
            <mx:AdvancedDataGridColumn dataField="Estimate" width="70"/>
            <mx:AdvancedDataGridColumn id="diffCol"
                headerText="Difference"/>
        </mx:columns>

        <mx:rendererProviders>
            <mx:AdvancedDataGridRendererProvider column="{diffCol}"
                 renderer="SummaryRenderer"/>
        </mx:rendererProviders>
    </mx:AdvancedDataGrid>
</mx:Application>







<?xml version="1.0"?>
<!-- dpcontrols/adg/myComponents/SummaryRenderer.mxml -->
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" textAlign="center">
    <mx:Script>
        <![CDATA[

        override public function set data(value:Object):void
        {
            var diff:Number =
                Number(value["Actual"]) - Number(value["Estimate"]); 
                             // 다른필드데이타필드로부터 값얻어오는방법   value["필드명"]
            if (diff < 0)
            {

                setStyle("color", "red");
                text = "Undersold by " + usdFormatter.format(diff);
            }
            else
            {

                setStyle("color", "green");
                text = "Exceeded estimate by " + usdFormatter.format(diff);
            }
        }
        ]]>
    </mx:Script>
   
    <mx:CurrencyFormatter id="usdFormatter" precision="2"
        currencySymbol="$" decimalSeparatorFrom="."
        decimalSeparatorTo="." useNegativeSign="true"
        useThousandsSeparator="true" alignSymbol="left"/>
</mx:Label>

이 옵션은 db로부터 데이타값을 받고  datagrid에 바인딩시킬때 원하는 포멧형식을 지정해줄때 사용하면 좋을듯하다.

일반적으로  db로부터 리턴받는 타입에 따라서 item부분을 Object 혹은 xml로 리턴받게된다.
상황에 따라서 선택적으로 사용하면될듯..

public static function labelFuncDateFormat(item:Object,column:DsDataGridColumn):String{
  var strVal:String = "";
  var tmpStr:String = item[column.dataField] as String;
  if(tmpStr == "" || tmpStr == null){
   strVal = "";
  else if(tmpStr.length > 8){
   strVal = tmpStr.substr(0,4)+"-"+tmpStr.substr(4,2)+"-"+tmpStr.substr(6,2);   
  }
  return strVal;
}


<mx:DataGridColumn headerText="현재날짜"
            textAlign="left"
            dataField="EDITDATE" labelFunction=" labelFuncDateFormat"/>