ExtJS的使用方法匯總(6)——工具列和菜單

文章目錄

• 一、簡單菜單
• 二、向菜單中添加分隔線
• 三、多級菜單
• 四、進階菜單
• 五、小結

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

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

一、簡單菜單

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

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

Ext.onReady(function(){<br /> var tb=new Ext.Toolbar();<br /> tb.render('toolbar');</p><p> tb.add({<br /> text:"建立N",<br /> handler:function(){<br /> Ext.Msg.alert('提示','建立');<br /> }<br /> },{<br /> text:"修改C"<br /> },{<br /> text:"刪除"<br /> },{<br /> text:"顯示"<br /> });<br /> });

效果1所示：

圖1 簡單的工具條

二、向菜單中添加分隔線

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

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

var menu1=new Ext.menu.Menu({<br /> items:[<br /> {text:'菜單一'},<br /> {text:'菜單二'}<br /> ]<br /> });<br /> //menu1.add('-');<br /> menu1.add('separator');<br /> var tb=new Ext.Toolbar();<br /> tb.render('toolbar');</p><p> tb.add({<br /> text:'建立',<br /> menu:menu1<br /> });

2、用Ext.menu.Separator的執行個體作為參數，如下面的代碼所示：

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

具體效果2所示：

圖2.1 無分隔線效果

圖2.2 具有分隔線效果

三、多級菜單

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

var menuHistory=new Ext.menu.Menu({<br /> items:[<br /> {text:'今天'},<br /> {text:'昨天'},<br /> {text:'一周'},<br /> {text:'一年'}<br /> ]<br /> });</p><p> var menuFile=new Ext.menu.Menu({<br /> items:[{<br /> text:'建立'<br /> },{<br /> text:'開啟'<br /> },{<br /> text:'儲存'<br /> },{<br /> text:'曆史',menu:menuHistory<br /> },{<br /> text:'關閉'<br /> }]<br /> });</p><p> var tb=new Ext.Toolbar();<br /> tb.render('toolbar');</p><p> tb.add({<br /> text:'檔案',<br /> menu:menuFile<br /> });

實現如下所示：

圖3 兩層結構的嵌套菜單

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

四、進階菜單

除了上面提到的最基本的功能表按鈕，EXT還為我們提供了一些功能比較複雜的菜單控制項，供我們直接調用，本節將詳細介紹這些進階菜單的使用方法和執行個體。

4.1 多選菜單和單選菜單

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

var menuCheckbox=new Ext.menu.Menu({<br /> items:[<br /> new Ext.menu.CheckItem({<br /> text:'粗體',<br /> checked:true,<br /> checkHandler:function(item,checked){<br /> Ext.Msg.alert('多選',(checked?'選中':'取消')+'粗體');<br /> }<br /> }),<br /> new Ext.menu.CheckItem({<br /> text:'斜體',<br /> checked:true,<br /> checkHandler:function(item,checked){<br /> Ext.Msg.alert('多選',(checked?'選中':'取消')+'斜體');<br /> }<br /> })<br /> ]<br /> })<br /> var tb=new Ext.Toolbar();<br /> tb.render('toolbar');</p><p> tb.add({<br /> text:'字型',<br /> menu:menuCheckbox<br /> });

4所示

圖4 多選菜單

4.2 時間菜單

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

tb.add({<br /> text:'日期',<br /> menu:new Ext.menu.DateMenu({<br /> handler:function(dp,date){<br /> Ext.Msg.alert('選擇日期','你選擇的日期是{0}.',date.format('Y年m月d日'));<br /> }<br /> })<br /> });

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

圖5 日期菜單

4.3 顏色菜單

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

圖6 顏色菜單

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

tb.add({<br /> text:'顏色',<br /> menu:new Ext.menu.ColorMenu({<br /> handler:function(cm,color){<br /> if(typeof color=='string'){<br /> Ext.Msg.alert('選擇顏色','選擇的顏色是'+color);<br /> }<br /> }<br /> })<br /> });

五、小結

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