DataGridにLabel、CheckBox、Buttonをネスト

2296 ワード

<mx:DataGrid id="dgList" resizableColumns="false" x="510" y="430" rowCount="6" dataProvider="{_fileList}" width="480" rowHeight="27">
 <mx:columns>
  <mx:DataGridColumn headerText=" " dataField="docName"/>
  <mx:DataGridColumn textAlign="center" width="70" headerText=" ">
   <mx:itemRenderer>
    <fx:Component>
     <mx:Label text="Download" color="#5480F0" textDecoration="underline" useHandCursor="true" 
         buttonMode="true"  mouseChildren="false" click="outerDocument.downloadFile()"/>
    </fx:Component>
   </mx:itemRenderer>
  </mx:DataGridColumn>
  <mx:DataGridColumn textAlign="center" width="70" headerText="CheckBox" dataField="areaID" >
   <mx:itemRenderer>
    <fx:Component>
     <mx:CheckBox paddingLeft="30" selected="{data.selected}" click="outerDocument.cbClickHanlder(this);" enabled="{outerDocument._enabelFlg}"/>
    </fx:Component>
   </mx:itemRenderer>
  </mx:DataGridColumn>
  <mx:DataGridColumn textAlign="center" width="70" headerText="Button">
   <mx:itemRenderer>
    <fx:Component>
     <mx:Button label="Button" width="80%" buttonMode="true" cornerRadius="4" click="outerDocument.btnClickHanlder(this);"  enabled="{outerDocument._enabelFlg}"/>
    </fx:Component>
   </mx:itemRenderer>
  </mx:DataGridColumn>
 </mx:columns>
</mx:DataGrid>

 
[Bindable]
public var _enabelFlg:Boolean = true;
/**
 * CheckBox 
 */
public function cbClickHanlder(obj:Object):void{
 if(obj.selected){
  _fileList.getItemAt(dgList.selectedIndex)["selected"] = true;
 }else{
  _fileList.getItemAt(dgList.selectedIndex)["selected"] = false;
 }
}