在DataGrid的GridColumn列中加入按钮宣染器

在项目中需要做如一个如下图效果的这样一个功能：

 

需要在DataGrid的GridColumn列中加入按钮宣染器：

1 首先声明一个spark  DataGrid.在最后一列中加入按钮宣染器，红色代码部分

[html]
<s:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="on" width="100%" height="100%" minHeight="200" skinClass="com.tm.skin.DataGridSkin"> 
    <s:columns> 
            <s:ArrayList> 
                <s:GridColumn headerText="地区名称" dataField="areaName" /> 
                <s:GridColumn headerText="地区NO" dataField="areaNo" /> 
                <s:GridColumn headerText="是否使用" dataField="isUse" labelFunction="isUseValue"/> 
                <SPAN style="COLOR: #ff0000"><s:GridColumn itemRenderer="com.tm.renderer.OperateItem" editable="false"/> </SPAN> 
            </s:ArrayList> 
    </s:columns> 
</s:DataGrid> 

<s:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="on" width="100%" height="100%" minHeight="200" skinClass="com.tm.skin.DataGridSkin">
 <s:columns>
   <s:ArrayList>
    <s:GridColumn headerText="地区名称" dataField="areaName" />
    <s:GridColumn headerText="地区NO" dataField="areaNo" />
    <s:GridColumn headerText="是否使用" dataField="isUse" labelFunction="isUseValue"/>
    <s:GridColumn itemRenderer="com.tm.renderer.OperateItem" editable="false"/>
   </s:ArrayList>
 </s:columns>
</s:DataGrid>2 在宣染器类GridItemRenderer中，有2个按钮，并且为这2个按钮，加了自定义事件，派发出去：

[java]
<fx:Script> 
        <![CDATA[ 
            import com.tm.event.OperateEvent; 
            private function removeItem():void { 
                trace(data); 
                var removeEvent:OperateEvent = new OperateEvent(OperateEvent.REMOVE,data); 
                this.dispatchEvent(removeEvent);                                 
            } 
             
            private function updateItem():void { 
                var updateEvent:OperateEvent = new OperateEvent(OperateEvent.UPDATE,data); 
                this.dispatchEvent(updateEvent);                                 
            } 
        ]]> 
</fx:Script> 
     
<s:Button label="编辑" click="updateItem()"/> 
<s:Button label="删除" click="removeItem()"/> 

<fx:Script>
  <![CDATA[
   import com.tm.event.OperateEvent;
   private function removeItem():void {
    trace(data);
    var removeEvent:OperateEvent = new OperateEvent(OperateEvent.REMOVE,data);
    this.dispatchEvent(removeEvent);        
   }
   
   private function updateItem():void {
    var updateEvent:OperateEvent = new OperateEvent(OperateEvent.UPDATE,data);
    this.dispatchEvent(updateEvent);        
   }
  ]]>
</fx:Script>
 
<s:Button label="编辑" click="updateItem()"/>
<s:Button label="删除" click="removeItem()"/>3 自定义事件如下：

[java]
public class OperateEvent extends Event 
    { 
        public var data:Object; 
        public static const REMOVE:String = "remove"; 
        public static const UPDATE:String = "update"; 
        public function OperateEvent(type:String,data:Object, bubbles:Boolean=true, cancelable:Boolean=false) 
        { 
            this.data = data; 
            super(type, bubbles, cancelable); 
        } 
    } 

public class OperateEvent extends Event
 {
  public var data:Object;
  public static const REMOVE:String = "remove";
  public static const UPDATE:String = "update";
  public function OperateEvent(type:String,data:Object, bubbles:Boolean=true, cancelable:Boolean=false)
  {
   this.data = data;
   super(type, bubbles, cancelable);
  }
 }
4  最后我们需要在主程序中，也就是使用了spark 的 DataGrid的类中，在creationComplete初始化方法中，加入对自定义事件的监听方法：

[html]
protected function CompleteHandler(event:FlexEvent):void 
            { 
                <SPAN style="COLOR: #cc0000">DataGrid2.addEventListener(OperateEvent.REMOVE,removeUI); 
                DataGrid2.addEventListener(OperateEvent.UPDATE,updateUI);</SPAN> 
                serverPagingBar1.dataGrid=DataGrid2; 
                //flex 分页 
                serverPagingBar1.pagingFunction=pagingFunction; 
            } 

protected function CompleteHandler(event:FlexEvent):void
   {
    DataGrid2.addEventListener(OperateEvent.REMOVE,removeUI);
    DataGrid2.addEventListener(OperateEvent.UPDATE,updateUI);
    serverPagingBar1.dataGrid=DataGrid2;
    //flex 分页
    serverPagingBar1.pagingFunction=pagingFunction;
   }5  在监听到这两件事件之后，编写处理函数：removeUI 删除 ，update  编辑 .如下：

[html]
protected function updateUI(event:OperateEvent):void 
            { 
                var areaUI:AreaUI = PopUpManager.createPopUp(this,AreaUI) as AreaUI; 
                areaUI.state = "update"; 
                areaUI.areaVo = event.data as AreaVo; 
                PopUpManager.centerPopUp(areaUI); 
            } 

protected function updateUI(event:OperateEvent):void
   {
    var areaUI:AreaUI = PopUpManager.createPopUp(this,AreaUI) as AreaUI;
    areaUI.state = "update";
    areaUI.areaVo = event.data as AreaVo;
    PopUpManager.centerPopUp(areaUI);
   }[html] view plaincopyprint?protected function removeUI(event:OperateEvent):void 
            { 
                Alert.okLabel = '确定'; 
                Alert.cancelLabel = '取消'; 
                Alert.show("确定要删除该记录","确定删除该记录？",Alert.OK|Alert.CANCEL,this,removeFunction); 
                recId = event.data.recNo; 
                 
            } 

protected function removeUI(event:OperateEvent):void
   {
    Alert.okLabel = '确定';
    Alert.cancelLabel = '取消';
    Alert.show("确定要删除该记录","确定删除该记录？",Alert.OK|Alert.CANCEL,this,removeFunction);
    recId = event.data.recNo;
    
   }结束！