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

這樣就可以按情況加入菜單項了，好了，就寫到這，希望對你有所幫助。