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

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

一、簡單菜單

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

過程大致包括：先創(chuàng)建一個工具條，用工具條的render()函數(shù)把它渲染在DIV上，然后調(diào)用Toolbar的add函數(shù)，向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'作為參數(shù)，如下面的代碼所示：

  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的實(shí)例作為參數(shù)，如下面的代碼所示：

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

 

具體效果如圖2所示：

2.1

圖2.1 無分隔線效果

2.2

圖2.2 具有分隔線效果

三、多級菜單

下拉菜單可以嵌套，而且嵌套的層數(shù)似乎任意的，我們先來看一個兩層結(jié)構(gòu)的菜單，實(shí)現(xiàn)方法很簡單，只要在下拉菜單中再加一個menu菜單參數(shù)并指定對應(yīng)的下級菜單即可，如下面代碼所示：

  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:'關(guān)閉'  
  21.                 }]  
  22.              });  
  23.                
  24.              var tb=new Ext.Toolbar();  
  25.              tb.render('toolbar');  
  26.                
  27.              tb.add({  
  28.                 text:'文件',  
  29.                 menu:menuFile  
  30.              });  

 

實(shí)現(xiàn)效果圖如下所示：

4

圖3 兩層結(jié)構(gòu)的嵌套菜單

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

四、高級菜單

除了上面提到的最基本的菜單按鈕，EXT還為我們提供了一些功能比較復(fù)雜的菜單控件，供我們直接調(diào)用，本節(jié)將詳細(xì)介紹這些高級菜單的使用方法和實(shí)例。

4.1 多選菜單和單選菜單

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

  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，它可以讓我們直接把日期選擇功能加入到菜單中，實(shí)現(xiàn)的代碼如下：

  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,使用時應(yīng)該用menu參數(shù)將它設(shè)置成上級菜單的子菜單。實(shí)現(xiàn)的效果圖如圖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.              });  

 

五、小結(jié)

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