DataGrid 之右键菜单

     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();
}

 

      用的时候调用addContextMenu就行了。这个函数有两个参数，第一个是菜单数据，如：['详细信息','相关文件']，第二个参数就是菜单事件了。

      它的特点是，当鼠标点击到header或没有数据的地方时菜单是灰色的，只有点击到数据上时菜单才可用。