Flex的右键菜单是通过contextMenu来实现的。谈到向DataGrid添加右键菜单,肯定有人会想到直接设置DataGrid的实例(id为dg,后面均用dg代替)的contextMenu属性就行了,还有人会想到通过设置itemRenderer来实现右键菜单功能。
下面以个人观点分析下着两种方法。具体怎么实现就不说了,主要是谈论下各自的优缺点
一、设置dg的contextMenu属性,这种方法的优点是代码简单、实现方便、让人容易看懂明白。缺点是,这样添加的右键菜单,是添加到整个dg上面了,在header上以及没有数据的地方都会出现右键菜单。当你想对某条数据实现右键功能时。这种方法很不准确,不能体现当前弹出的菜单对应的是哪条数据,试想header上弹出右键菜单“详细信息”会让人感觉很奇怪。
二、通过设置itemRenderer来实现右键功能。优点是,它的优点正好弥补了第一种方法的缺点。他能非常准确的显示当前弹出的右键菜单对应的是哪条数据。并且在header和没有数据的地方不会弹出右键菜单,它的缺点是,个人感觉有点复杂,首先得新建itemRenderer类,在这个类里设置右键菜单,然后设置dg的itemRenderer。感觉不太方便比较麻烦。
于是我想到了我自己的写法:
其实就是添加了两个函数,感觉挺方便的。
代码
//添加右键菜单
public function addContextMenu(cmArr:Array,menuItemSelFunc:Function):void{
var cm:ContextMenu=new ContextMenu;
cm.hideBuiltInItems();
cm.addEventListener(ContextMenuEvent.MENU_SELECT,menuSelectEvt);
dg.contextMenu=cm;
for(var i:uint=0;i<cmArr.length;i++){
var cmi:ContextMenuItem=new ContextMenuItem(cmArr[i],cmArr[i]=="");
cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,menuItemSelFunc);
cm.customItems.push(cmi);
}
}
private function menuSelectEvt(e:ContextMenuEvent):void{
var cm:ContextMenu=e.currentTarget as ContextMenu;
var _dg:DataGrid=e.contextMenuOwner as DataGrid;
var _mouseRow:Number=Math.ceil((_dg.mouseY-_dg.headerHeight)/_dg.rowHeight)-1;
var dgDataCount:Number=_dg.dataProvider==null?0:(_dg.dataProvider as IList).length;
if(_mouseRow<0||_mouseRow>dgDataCount-1){
var enabled:Boolean=false;
_dg.selectedIndex=-1;
}else{
enabled=true;
_dg.selectedIndex=_mouseRow+_dg.verticalScrollPosition;
}
for(var i:uint=0;i<cm.customItems.length;i++){
var cmi:ContextMenuItem=cm.customItems[i];
cmi.enabled=enabled;
}
_dg.validateNow();
}
public function addContextMenu(cmArr:Array,menuItemSelFunc:Function):void{
var cm:ContextMenu=new ContextMenu;
cm.hideBuiltInItems();
cm.addEventListener(ContextMenuEvent.MENU_SELECT,menuSelectEvt);
dg.contextMenu=cm;
for(var i:uint=0;i<cmArr.length;i++){
var cmi:ContextMenuItem=new ContextMenuItem(cmArr[i],cmArr[i]=="");
cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,menuItemSelFunc);
cm.customItems.push(cmi);
}
}
private function menuSelectEvt(e:ContextMenuEvent):void{
var cm:ContextMenu=e.currentTarget as ContextMenu;
var _dg:DataGrid=e.contextMenuOwner as DataGrid;
var _mouseRow:Number=Math.ceil((_dg.mouseY-_dg.headerHeight)/_dg.rowHeight)-1;
var dgDataCount:Number=_dg.dataProvider==null?0:(_dg.dataProvider as IList).length;
if(_mouseRow<0||_mouseRow>dgDataCount-1){
var enabled:Boolean=false;
_dg.selectedIndex=-1;
}else{
enabled=true;
_dg.selectedIndex=_mouseRow+_dg.verticalScrollPosition;
}
for(var i:uint=0;i<cm.customItems.length;i++){
var cmi:ContextMenuItem=cm.customItems[i];
cmi.enabled=enabled;
}
_dg.validateNow();
}
用的时候调用addContextMenu就行了。这个函数有两个参数,第一个是菜单数据,如:['详细信息','相关文件'],第二个参数就是菜单事件了。
它的特点是,当鼠标点击到header或没有数据的地方时菜单是灰色的,只有点击到数据上时菜单才可用。