Flex3.0&AS3 2009. 2. 10. 11:51

Datagrid 안에서 itemrenderer활용 샘플





<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"
 width="450" height="370" verticalScrollPolicy="off" horizontalScrollPolicy="off"
 backgroundColor="#FFFFFF">
    <mx:Script>
        <![CDATA[
         import comp.MultiObject;
         import mx.collections.ArrayCollection;
            [Bindable]
            public var initDG:ArrayCollection = new ArrayCollection([
             new MultiObject(1, 'Test1', 1, false),
             new MultiObject(2, 'Test2', 2, false),
             new MultiObject(3, 'Test3', 3, false),
             new MultiObject(4, 'Test4', 4, false),
             new MultiObject(5, 'Test5', 5, false),
             new MultiObject(6, 'Test6', 6, false),
             new MultiObject(7, 'Test7', 7, false),
             new MultiObject(8, 'Test8', 8, false),
             new MultiObject(9, 'Test9', 9, false),
             new MultiObject(10, 'Test10', 10, true),
             new MultiObject(11, 'Test11', 11, false),
             new MultiObject(12, 'Test12', 12, false),
             new MultiObject(13, 'Test13', 13, false),
             new MultiObject(14, 'Test14', 14, false),
             new MultiObject(15, 'Test15', 15, false),
             new MultiObject(16, 'Test16', 16, false),
             new MultiObject(17, 'Test17', 17, false),
             new MultiObject(18, 'Test18', 18, false),
             new MultiObject(19, 'Test19', 19, false),
             new MultiObject(20, 'Test20', 20, true)            
            ]);              
      [Bindable] public var isEditable:Boolean = false;
      [Bindable] public var totalData:String = "Total : ";
      [Bindable] public var test:String = "test: ";
      private function activateRadio():void {
       isEditable = true;
      }
      private function deActivateRadio():void {
       isEditable = false;      
      }
      private var flag:Boolean = false;
      public function checkAll():void {
       if(flag) {
        flag = false;
       } else {
        flag = true;
       }
       for(var idx:uint=0; idx<initDG.length; idx++) {
        initDG[idx] = new MultiObject(initDG[idx].No, initDG[idx].Name, initDG[idx].CheckNum, flag);
       }
      }
        ]]>
    </mx:Script>
    <mx:DataGrid id="myGrid" dataProvider="{initDG}" headerHeight="50" variableRowHeight="false"
     editable="true" width="450" height="300" >   
        <mx:columns>
                <mx:DataGridColumn headerText="No" dataField="No" width="30"/>
                <mx:DataGridColumn headerText="Name" dataField="Name"/>
                <mx:DataGridColumn headerText="IsChecked" dataField="IsChecked" editable="true"/>
                <mx:DataGridColumn headerText="Radio IR" dataField="IsChecked" editable="false">
         <mx:itemRenderer>
           <mx:Component>
             <mx:HBox horizontalAlign="center" implements="mx.controls.listClasses.IDropInListItemRenderer">
               <mx:Script>
                <![CDATA[
                 import mx.controls.Alert;
                import comp.MultiObject;
                import mx.controls.DataGrid;
                import mx.controls.dataGridClasses.DataGridListData;
                import mx.controls.listClasses.BaseListData;
       
                private var _listData:BaseListData;
               
                public function get listData():BaseListData {
                  return _listData;
                }
                public function set listData( value:BaseListData ):void {
                  _listData = value;
                }  
               
               
                       private function changeRDO(evt:MouseEvent):void {
                        
                         var myListData:DataGridListData = evt.target.parentDocument.listData;
                         var myDG:DataGrid = DataGrid(myListData.owner);
                         var idx:Number = Number(no.text)-1;
                         Alert.show(myDG.document.test);
                  for(var i:uint=0; i<myDG.document.initDG.length; i++) {
                    if(i == idx) {
                      myDG.document.initDG[i] = new MultiObject(myDG.document.initDG[i].No, myDG.document.initDG[i].Name,
                      myDG.document.initDG[i].CheckNum, true);           
                    }else{
                      myDG.document.initDG[i] = new MultiObject(myDG.document.initDG[i].No, myDG.document.initDG[i].Name,
                      myDG.document.initDG[i].CheckNum, false);
                    }
                  }                  
                       } 
                ]]>
               </mx:Script>
              <mx:Text id="no" text="{data.No}" visible="false" width="0"/>
              <mx:RadioButton id="rdo" selected="{data.IsChecked}" click="changeRDO(event)"/>
             </mx:HBox>
           </mx:Component>
         </mx:itemRenderer>
                </mx:DataGridColumn>
                           
             <mx:DataGridColumn dataField="IsChecked" headerText="itemEditor" editorDataField="cbSelected">
              <mx:itemEditor>
               <mx:Component>
           <mx:VBox backgroundColor="yellow" implements="mx.controls.listClasses.IDropInListItemRenderer">
              <mx:Script>
                   <![CDATA[
                    import mx.events.FlexEvent;
              import comp.MultiObject;
              import mx.controls.DataGrid;
              import mx.controls.dataGridClasses.DataGridListData;
              import mx.controls.listClasses.BaseListData;
    
              private var _listData:BaseListData;
              public function get listData():BaseListData {
                return _listData;
              }
              public function set listData( value:BaseListData ):void {
                _listData = value;
              }
                       public var cbSelected:Boolean;
                       override public function set data(value:Object):void {
                        if(value != null) {
                super.data = value;
                if (value.IsChecked == true) {
                 combo.selectedIndex = 0;
                } else {
                 combo.selectedIndex = 1;            
                }
                        }
                        dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
                       }                  
                       private function changeCombo(evt:Event):void {
                        var myListData:DataGridListData = evt.target.parentDocument.listData;
                        var myDG:DataGrid = DataGrid(myListData.owner);
                        var idx:Number = Number(no.text)-1;
               for(var i:uint=0; i<myDG.document.initDG.length; i++) {
                if(i == idx && evt.target.selectedIndex == 0) {
                 myDG.document.initDG[i] = new MultiObject(myDG.document.initDG[i].No, myDG.document.initDG[i].Name,
                  myDG.document.initDG[i].CheckNum, true);
                } else {
                 myDG.document.initDG[i] = new MultiObject(myDG.document.initDG[i].No, myDG.document.initDG[i].Name,
                  myDG.document.initDG[i].CheckNum, false);
                }
               }
                       } 
                   ]]>
               </mx:Script>
            <mx:ComboBox id="combo" change="changeCombo(event)" updateComplete="cbSelected=combo.selectedItem.data" >
             <mx:dataProvider>
              <mx:Object label="true" data="true"/>
              <mx:Object label="false" data="false"/>
             </mx:dataProvider>
            </mx:ComboBox>  
            <mx:Text id="no" text="{data.No}" visible="false" width="0"/>      
           </mx:VBox>               
               </mx:Component>
              </mx:itemEditor>
             </mx:DataGridColumn>
               
                <mx:DataGridColumn dataField="IsChecked" headerText="CheckBox IR" editable="false" rendererIsEditor="true" >
         <mx:itemRenderer>
           <mx:Component>
             <mx:HBox horizontalAlign="center" implements="mx.controls.listClasses.IDropInListItemRenderer">
               <mx:Script>
                <![CDATA[
                import comp.MultiObject;
                import mx.controls.DataGrid;
                import mx.controls.dataGridClasses.DataGridListData;
                import mx.controls.listClasses.BaseListData;
       
                private var _listData:BaseListData;
                public function get listData():BaseListData {
                  return _listData;
                }
                public function set listData( value:BaseListData ):void {
                  _listData = value;
                }  
                         private function changeCB(evt:MouseEvent):void {
                          var myListData:DataGridListData = evt.target.parentDocument.listData;
                          var myDG:DataGrid = DataGrid(myListData.owner);
                 myDG.document.initDG[Number(no.text)-1] = new MultiObject(myDG.selectedItem.No, myDG.selectedItem.Name,
                 myDG.selectedItem.CheckNum, evt.target.selected);
                         } 
                ]]>
               </mx:Script>
              <mx:Text id="no" text="{data.No}" visible="false" width="0"/>
              <mx:CheckBox id="cb" selected="{data.IsChecked}" click="changeCB(event)"/>
             </mx:HBox>
           </mx:Component>
         </mx:itemRenderer>
                </mx:DataGridColumn>           
        </mx:columns>       
    </mx:DataGrid>    
    <mx:HBox width="650" horizontalAlign="center">
  <mx:Button label="Check All or None" click="checkAll()"/>
    </mx:HBox>
</mx:Application>