Extjs实现菜单下拉和鼠标右键菜单（加入系统菜单权限判断，有权限则显示，无反之）

其实实现并不难。废话不说，先看效果图：

（点击“更多功能”按钮，出现下拉菜单，这样就能把一些菜单按钮放到这里，使可视页面不会很拥挤）

（在当前页面的任何位置鼠标右键，弹出菜单选项）

现在看看这样通过Extjs实现：

<script language="javascript"> 
   var menu = new Ext.menu.Menu();
     menu.add({id: 'menu1',text:'上笔',handler:prevBill,iconCls:'icon-prev'});
     menu.add({id: 'menu2',text:'下笔',handler:nextBill,iconCls:'icon-next'});
     menu.add({id: 'menu3',text:'增加(F2)',handler:addBill,iconCls:'icon-add'});
     menu.add({id: 'menu4',text:'查找(F3)',handler:productFind,iconCls:'icon-search'});
     menu.add({id: 'menu5',text:'导入',handler:pdInput,iconCls:'icon-add-row'});
     menu.add({id: 'menu6',text:'导出',handler:xslquery,iconCls:'icon-add-row'});
     menu.add({id: 'menu7',text:'条码(F7)',handler:txmInput,iconCls:'icon-add-row'});
     menu.add({id: 'menu8',text:'整单折扣修改',handler:bathnewDiscount,iconCls:'icon-add-row'});
    
   function showMenus(el){
        menu.show(el);
   }
   
   //鼠标右键菜单
   Ext.onReady(function(){
          //禁止整个页面的右键
          Ext.getDoc().on("contextmenu", function(e){
               e.stopEvent();
          });
          //注册右键
          Ext.getBody().on("contextmenu",function(e){
              menu.showAt(e.getPoint()); //显示在当前位置 
          });
      });
   
</script> 

是不是很简单，接下来要说下怎样加入系统的权限判断，思路是这样的，当它没有浏览该菜单项的权限时，我们就不把它加入到menu中，也就是说“menu.add({id: 'XX',text:'XX',handler:XX,iconCls:'XX'});”语句不产生。系统里，用的是自定义jsp标签，然后再java服务端一个一个按钮判断权限，有浏览权限时就加上该js语句，实现过程有：

1.先自定义一个按钮，比如我用一个标志区别于其他的按钮，加入到要产生加入menu时位置。如jsp加入：

<script language="javascript">
   var menu = new Ext.menu.Menu();
    <sws:Button icon='icon-prev'  name="menu1" moremenu="true"  hotkey="37"   onclick="prevBill" value="上笔"/>
    <sws:Button icon='icon-next' name="menu2" moremenu="true"  hotkey="39" onclick="nextBill" value="下笔"/>
    <sws:Button icon='icon-search' name="menu3" hotkey="F3,114" moremenu="true"  onclick="productFind" value="查找"/>
    <sws:Button icon='icon-add-row' invoke="isDbinEdit" name="menu4" moremenu="true"  onclick="pdInput" value="导入"/>
    <sws:Button icon='icon-add-row'  invoke="isDbinEdit" name="menu5" moremenu="true" onclick="xslquery"   value="导出"/>
    <sws:Button icon='icon-add-row' invoke="isDbinEdit" name="menu6" hotkey="F7,118" moremenu="true"  onclick="txmInput" value="条码"/>
    <sws:Button icon='icon-add-row' invoke="isDbinEdit" name="menu7"  moremenu="true"  onclick="bathnewDiscount" value="整单折扣修改"/>
   function showMenus(el){
        menu.show(el);
   }
   
   //鼠标右键菜单
   Ext.onReady(function(){
          //禁止整个页面的右键
          Ext.getDoc().on("contextmenu", function(e){
                e.stopEvent();
          });
          //注册右键
          Ext.getBody().on("contextmenu",function(e){
              menu.showAt(e.getPoint()); //显示在当前位置 
          });
      });
   
</script>

有看到不同了吗，是的，其中只是把本来添加菜单项的js语句用jsp的自定义标签写上，然后再解析标签，这样就能控制权限了。
2.根据jsp自定义标签的解析步骤，在tld中写的处理类中的doEndTag（）方法中做处理：

比如：

if (MORE_MENU_FALSE.equalsIgnoreCase(this.getMoremenu())) {//区别于其他按钮的标志
                ......            } else {
                results.append(" menu.add({");
                results.append("id: '");
                results.append(this.getName());
                results.append("',");
                results.append("text:'");
                results.append(this.getValue());
                results.append("'");
                if(StringUtil.isNotBlank(this.getOnclick())){
                results.append(",");
                results.append("handler:");
                results.append(this.getOnclick());
                }
                if (StringUtil.isNotBlank(this.getIcon())) {
                    results.append(",");
                    results.append("iconCls:'");
                    results.append(this.getIcon());
                    results.append("'");
                }
                results.append("});");

            }

            TagUtils.getInstance().write(pageContext, results.toString());

这样就可以按情况加入菜单项了，好了，就写到这，希望对你有所帮助。