在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;
				
			}

結束！