菜單的種類很多，包括下拉菜單、分組菜單、右鍵菜單等等，右鍵菜單與Window桌面上單擊右鍵彈出的菜單效果一樣，只是樣式不同，菜單上的內容包括文字、單選框、按鈕等。對于EXT來說，這些菜單的實現都非常簡單。

我們可以在一個面板的頂端或底端放置一橫排功能按鈕，按下不同的按鈕時會執行不同的操作。我們把這個橫條稱為工具條，放在工具條上的按鈕稱為菜單。本章將詳細介紹EXT中工具欄和菜單的使用方法。

一、簡單菜單

創建一個簡單工具條的方法如下，注意的一點是HTML代碼必須要有：<div id="toolbar"></div>

過程大致包括：先創建一個工具條，用工具條的render()函數把它渲染在DIV上，然后調用Toolbar的add函數，向Toolbar添加 4個按鈕，同時還可以添加單擊處理事件。

  1. Ext.onReady(function(){  
  2.              var tb=new Ext.Toolbar();  
  3.              tb.render('toolbar');  
  4.                
  5.              tb.add({  
  6.                 text:"新建N",  
  7.                 handler:function(){  
  8.                     Ext.Msg.alert('提示','新建');  
  9.                 }  
  10.              },{  
  11.                 text:"修改C"  
  12.              },{  
  13.                 text:"刪除"  
  14.              },{  
  15.                 text:"顯示"  
  16.              });  
  17.         });  

 

效果如圖1所示：

1

圖1 簡單的工具條

二、向菜單中添加分隔線

分隔線顯示就是一條水平線，可以使用它將菜單中不同類型的菜單項分隔顯示，Ext中向菜單中添加分隔線的方式有兩種。

1、使用連字符或'separator'作為參數，如下面的代碼所示：

  1. var menu1=new Ext.menu.Menu({  
  2.                 items:[  
  3.                     {text:'菜單一'},  
  4.                     {text:'菜單二'}  
  5.                 ]  
  6.              });  
  7.              //menu1.add('-');  
  8.              menu1.add('separator');  
  9.              var tb=new Ext.Toolbar();  
  10.              tb.render('toolbar');  
  11.                
  12.              tb.add({  
  13.                 text:'新建',  
  14.                 menu:menu1  
  15.              });  

 

2、用Ext.menu.Separator的實例作為參數，如下面的代碼所示：

  1. menu1.add(new Ext.menu.Separator());  
 

 

具體效果如圖2所示：

2.1

圖2.1 無分隔線效果

2.2

圖2.2 具有分隔線效果

三、多級菜單

下拉菜單可以嵌套，而且嵌套的層數似乎任意的，我們先來看一個兩層結構的菜單，實現方法很簡單，只要在下拉菜單中再加一個menu菜單參數并指定對應的下級菜單即可，如下面代碼所示：

  1. var menuHistory=new Ext.menu.Menu({  
  2.                 items:[  
  3.                     {text:'今天'},  
  4.                     {text:'昨天'},  
  5.                     {text:'一周'},  
  6.                     {text:'一年'}  
  7.                 ]  
  8.              });  
  9.                
  10.              var menuFile=new Ext.menu.Menu({  
  11.                 items:[{  
  12.                     text:'新建'  
  13.                 },{  
  14.                     text:'打開'  
  15.                 },{  
  16.                     text:'保存'  
  17.                 },{  
  18.                     text:'歷史',menu:menuHistory  
  19.                 },{  
  20.                     text:'關閉'  
  21.                 }]  
  22.              });  
  23.                
  24.              var tb=new Ext.Toolbar();  
  25.              tb.render('toolbar');  
  26.                
  27.              tb.add({  
  28.                 text:'文件',  
  29.                 menu:menuFile  
  30.              });  

 

實現效果圖如下所示：

4

圖3 兩層結構的嵌套菜單

在上面的實例中，我們可以直接使用menu參數指定在菜單的哪個部分加上子菜單。利用這些方法，我們就可以輕易實現自己想要的功能菜單了。

四、高級菜單

除了上面提到的最基本的菜單按鈕，EXT還為我們提供了一些功能比較復雜的菜單控件，供我們直接調用，本節將詳細介紹這些高級菜單的使用方法和實例。

4.1 多選菜單和單選菜單

我們使用Ext.menu.CheckItem來創建多選菜單,text參數表示菜單上顯示的文字，checked參數表示當前菜單項是否被選中.checkHandler用來指定選中菜單時執行的處理菜單.單選菜單也基本類似，具體使用代碼如下：

  1. var menuCheckbox=new Ext.menu.Menu({  
  2.                 items:[  
  3.                     new Ext.menu.CheckItem({  
  4.                         text:'粗體',  
  5.                         checked:true,  
  6.                         checkHandler:function(item,checked){  
  7.                             Ext.Msg.alert('多選',(checked?'選中':'取消')+'粗體');  
  8.                         }  
  9.                     }),  
  10.                     new Ext.menu.CheckItem({  
  11.                         text:'斜體 ',  
  12.                         checked:true,  
  13.                         checkHandler:function(item,checked){  
  14.                             Ext.Msg.alert('多選',(checked?'選中':'取消')+'斜體');  
  15.                         }  
  16.                     })  
  17.                 ]  
  18.              })  
  19.              var tb=new Ext.Toolbar();  
  20.              tb.render('toolbar');  
  21.                
  22.              tb.add({  
  23.                 text:'字體',  
  24.                 menu:menuCheckbox  
  25.              });  

 

效果圖如圖4所示

4

圖4 多選菜單

4.2 時間菜單

EXT為我們提供了選擇日期的菜單Ext.menu.DateMenu，它可以讓我們直接把日期選擇功能加入到菜單中，實現的代碼如下：

  1. tb.add({  
  2.                 text:'日期',  
  3.                 menu:new Ext.menu.DateMenu({  
  4.                     handler:function(dp,date){  
  5.                         Ext.Msg.alert('選擇日期','你選擇的日期是 {0}.',date.format('Y年m月d日'));  
  6.                     }  
  7.                 })  
  8.              });  

 

注意，這時Ext.menu.DateMenu時一個Menu而不是MenuItem,使用時應該用menu參數將它設置成上級菜單的子菜單。實現的效果圖如圖5所示。

5

圖5 日期菜單

4.3 顏色菜單

EXT為我們提供了選擇顏色的功能菜單Ext.menu.ColorMenu,效果圖如圖6所示。

7

圖6 顏色菜單

顏色選擇菜單雖然不常用，但它的效果十分絢麗，它的用法與日期菜單相似，也有特定的handler，如下面代碼所示：

  1. tb.add({  
  2.                 text:'顏色',  
  3.                 menu:new Ext.menu.ColorMenu({  
  4.                     handler:function(cm,color){  
  5.                         if(typeof color=='string'){  
  6.                             Ext.Msg.alert('選擇顏色','選擇的顏色是'+color);  
  7.                         }  
  8.                     }                  
  9.                 })  
  10.              });  

 

五、小結

本章主要介紹如何創建工具條和菜單，以及如何使用下拉菜單和分級菜單對我們需要的功能按鈕進行分組顯示，除此之外，還關于高級菜單進行了分析。至于分頁控件Ext.PagingToolbar的使用方法在后面的章節會給出介紹。