在项目中需要做如一个如下图效果的这样一个功能:
需要在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;
}
结束!