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

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

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

1 首先声明一个spark  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个按钮，加了自定义事件，派发出去：

<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 自定义事件如下：

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初始化方法中，加入对自定义事件的监听方法：

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  编辑 .如下：

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 removeUI(event:OperateEvent):void
			{
				Alert.okLabel = '确定';
				Alert.cancelLabel = '取消';
				Alert.show("确定要删除该记录","确定删除该记录？",Alert.OK|Alert.CANCEL,this,removeFunction);
				recId = event.data.recNo;
				
			}

结束！