簡(jiǎn)單菜單應(yīng)用
菜單包括很多種，比如下拉菜單、分組菜單位、上下文件彈出菜單位，菜單上的內(nèi)容包括文件、單選框、按鈕等。對(duì)于ExtJS來說，菜單的實(shí)現(xiàn)非常簡(jiǎn)單，我們來看下面示例。
Html代碼如下：
歡迎進(jìn)入管理系統(tǒng)<br/>
<div id="menu"></div>
我們想在id為menu的這一區(qū)域里面顯示系統(tǒng)的主菜單，應(yīng)用ExtJS，則可以使用下面的javascript代碼實(shí)現(xiàn)：
var btn1=new Ext.Button({
text:"文件",
menu:[
{icon:"open.jpg",text:"打開"},
{icon:"save.jpg",text:"保存"},
{text:"關(guān)閉"}]});
var btn2=new Ext.Button({
text:"編輯",
menu:[
{text:"復(fù)制"},
{text:"拷貝"},
"-",
{text:"查找"},
{text:"替換"}
]
})
var toolbar=new Ext.Toolbar({
renderTo:"menu",
items:[btn1,btn2]
});
在上面的代碼中，我們首先創(chuàng)建了兩個(gè)普通的按鈕Button，注意構(gòu)造參數(shù)中的配置選項(xiàng)除了text以外，還包含一下menu屬性，menu屬性是一個(gè)數(shù)組，數(shù)組中的每一項(xiàng)就是一個(gè)菜單項(xiàng)；兩個(gè)包含了菜單的按鈕創(chuàng)建完以后，我們使用new Ext.Toolbar直接創(chuàng)建一個(gè)簡(jiǎn)單工具欄控件，指定工具欄渲染到id為menu的DOM元素，并且工具欄中包含兩個(gè)按鈕。執(zhí)行上面的代碼，可以得到如圖11-1所示的效果。
圖11-1 鼠標(biāo)移到“文件”按鈕時(shí)顯示的下拉菜單
圖11-2 鼠標(biāo)移到“編輯”按鈕時(shí)顯示的下拉菜單
手動(dòng)創(chuàng)建及顯示菜單
當(dāng)然，對(duì)于給包含menu屬性的控件添加菜單非常容易，由于這些控件已經(jīng)自動(dòng)添加了菜單處理及顯示的代碼。對(duì)于沒有提供菜單支持的控件來說，我們可以直接使用ExtJS中的菜單組件Ext.menu.Menu來實(shí)現(xiàn)顯示菜單。
在ExtJS中，菜單項(xiàng)由Ext.menu.Item類定義，該類直接繼承自Ext.menu.BaseItem，我們只需創(chuàng)建一個(gè)菜單Menu對(duì)象，然后往Menu對(duì)象中加入菜單項(xiàng)，然后在需要顯示菜單的時(shí)候調(diào)用菜單Menu對(duì)象的show或showAt方法即可在指定位置顯示菜單。我們?cè)賮砜聪旅娴氖纠?br />
假如頁面中html代碼如下：
<br/>
<div id="hello" style="cursor:pointer">顯示菜單</div>
現(xiàn)在我們要實(shí)現(xiàn)在用戶點(diǎn)擊“顯示菜單”這一個(gè)div時(shí)，顯示一個(gè)包含“文件”、“編輯”等項(xiàng)的下拉菜單，下面的javascript代碼實(shí)現(xiàn)了該功能：
var menu=new Ext.menu.Menu();
menu.add(...{
text:"文件",
menu:[
...{text:"打開"},
...{text:"保存"},
...{text:"關(guān)閉"}]
},
...{
text:"編輯",
menu:[
...{text:"復(fù)制"},
...{text:"拷貝"}]
}
);
var h=Ext.get("hello");
h.on("click",function(e)...{
menu.show(h);
}
);
在上面的代碼中，我們首先使用new Ext.menu.Menu()創(chuàng)建了一個(gè)菜單對(duì)象，然后再調(diào)用菜單對(duì)象的add方法來加入菜單項(xiàng)，add方法可以一次性加入多個(gè)菜單項(xiàng)，每一個(gè)菜單項(xiàng)可以是一個(gè)Ext.menu.Item對(duì)象，也可以是用于構(gòu)造Ext.menu.Item的配置對(duì)象，這里直接使用的是菜單項(xiàng)描述對(duì)象。在菜單項(xiàng)中，我們又使用menu屬性來定義了“文件”、“編輯”兩個(gè)菜單項(xiàng)的二級(jí)菜單。
在定義完了菜單并加入菜單項(xiàng)后，我們定義了hello這個(gè)DOM元素的click事件響應(yīng)函數(shù)，在響應(yīng)函數(shù)中調(diào)用菜單對(duì)象menu的show方法來顯示菜單,show方法中包含一個(gè)參數(shù)，表示讓菜單顯示在哪兒。
執(zhí)行上面的程序，點(diǎn)擊頁面中“顯示菜單”這個(gè)DIV，則會(huì)看到如圖11-3所示的菜單顯示效果。
圖11-3 手動(dòng)創(chuàng)建及顯示菜單
ExtJS中的菜單項(xiàng)
在ExtJS中，菜單項(xiàng)提供了普通菜單項(xiàng)、文本菜單項(xiàng)、單選、復(fù)選等幾種基本的菜單項(xiàng)，我們前面兩個(gè)例子中涉及到的都是普通的菜單項(xiàng)。下面我們?cè)偻ㄟ^一個(gè)示例來簡(jiǎn)單地對(duì)文本菜單項(xiàng)、單選及復(fù)選菜單項(xiàng)有一個(gè)簡(jiǎn)單的了解，代碼內(nèi)容如下：
var menu=new Ext.menu.Menu();
menu.add(...{
text:"字號(hào)",
menu:[
new Ext.menu.CheckItem(...{text:"大",group:"font"}),
new Ext.menu.CheckItem(...{text:"中",group:"font"}),
new Ext.menu.CheckItem(...{text:"小",group:"font"})
]
},
...{
text:"字體",
menu:[
new Ext.menu.CheckItem(...{text:"加粗"}),
new Ext.menu.CheckItem(...{text:"斜體"})
]
},
"-",
new Ext.menu.TextItem("文本菜單項(xiàng)1"),
"文本菜單項(xiàng)2"
);
var h=Ext.get("hello");
h.on("click",function(e)...{
menu.show(h);
}
);
在上面的代碼中，首先使用new Ext.menu.Menu()來創(chuàng)建了一個(gè)菜單對(duì)象，在使用add方法添加菜單項(xiàng)的時(shí)候，“字號(hào)”菜單的二級(jí)菜單項(xiàng)是CheckItem對(duì)象，里面通過設(shè)置group屬性使得該菜單項(xiàng)成為單選菜單項(xiàng)，因?yàn)?#8220;字號(hào)”同一時(shí)刻只能選擇一種；“字體”菜單的二級(jí)菜單項(xiàng)同樣是使用CheckItem來創(chuàng)建，由于沒有指定group屬性，因些該菜單項(xiàng)就是復(fù)選菜單項(xiàng)。另外，還使用new Ext.menu.TextItem來創(chuàng)建文本菜單項(xiàng)，文本菜單項(xiàng)也可以直接使用字符串代表，比如“文本菜單項(xiàng)2”，而文本內(nèi)容為“-”的文本菜單項(xiàng)表現(xiàn)出來會(huì)成來菜單項(xiàng)分隔符。執(zhí)行上面的程序，點(diǎn)擊頁面中“hello”這個(gè)DIV時(shí)，將會(huì)顯示菜單，效果如圖11-4與圖11-5所示。
圖11-4 單選菜單項(xiàng)效果
圖11-5 復(fù)選菜單項(xiàng)效果
處理菜單事件
對(duì)于普通的菜單項(xiàng)來說，要設(shè)置事件響應(yīng)函數(shù)非常簡(jiǎn)單，只需要在菜單項(xiàng)添初始化的時(shí)候，在配置選項(xiàng)中添加上handler屬性及值即可。比如下面包含了事件處理器的菜單項(xiàng)：
function openFile()
...{
Ext.MessageBox.alert("提示","打開文件");
}
var btn1=new Ext.Button(...{
text:"文件",
menu:[
...{icon:"open.jpg",text:"打開",handler:openFile},
...{icon:"save.jpg",text:"保存"},
...{text:"關(guān)閉"}]
});
在“文件”菜單項(xiàng)下面的“打開”菜單項(xiàng)中，設(shè)置了handler屬性，因此點(diǎn)擊該菜單項(xiàng)則會(huì)執(zhí)行openFile函數(shù)。
其它菜單項(xiàng)
除了普通菜單項(xiàng)、文本、單選菜單項(xiàng)、復(fù)選菜單項(xiàng)以外，ExtJS中的菜單項(xiàng)理論上還可以是其它任何控件，或者說頁面中大部份DOM節(jié)點(diǎn)都可以用來做為菜單項(xiàng)上面的內(nèi)容。ExtJS提供了一個(gè)Ext.menu.Adapter類來支持把其它控件轉(zhuǎn)換成菜單項(xiàng)，并提供了兩個(gè)常用的用于選擇日期及顏色的菜單，即Ext.menu.DateMenu與Ext.menu.ColorMenu，這兩個(gè)菜單里面都只有一個(gè)菜單項(xiàng)，即Ext.menu.DateItem與Ext.menu.ColorItem。下面簡(jiǎn)單看示例：
var btn1=new Ext.Button(...{
text:"文件",
menu:[
...{icon:"open.jpg",text:"打開"},
...{icon:"save.jpg",text:"保存"},
...{text:"關(guān)閉"}]});
var btn2=new Ext.Button(...{
text:"編輯",
menu:[
...{text:"復(fù)制"},
...{text:"拷貝"},
"-",
...{text:"查找"},
...{text:"替換"}
]
});
var btn3=new Ext.Button(...{
text:"其它",
menu:[
...{text:"選擇日期",menu:new Ext.menu.DateMenu()},
...{text:"選擇顏色",menu:new Ext.menu.ColorMenu()}
]
});
var toolbar=new Ext.Toolbar(...{
renderTo:"menu",
items:[btn1,btn2,btn3]
});
在上面的代碼中，btn3這個(gè)按鈕下面包含“選擇日期”及“選擇顏色”兩個(gè)菜單項(xiàng)，選擇日期下的菜單是一個(gè)DateMenu對(duì)象，“選擇顏色”下的菜單是ColorMenu對(duì)象。執(zhí)行上面的程序，當(dāng)點(diǎn)擊其它按鈕的時(shí)候，可以得到如圖11-6與11-7所示的日期選擇及顏色選擇菜單。
圖11-6 日期DateMenu選擇菜單的顯示效果
圖11-7 顏色ColorMenu選擇菜單的顯示效果
(本文摘自《ExtJS實(shí)用開發(fā)指南》，該指南當(dāng)前在北京、深圳、成都、重慶、沈陽等城市均已經(jīng)可以直接到服務(wù)點(diǎn)購(gòu)買，具體聯(lián)系方式：http://www.vifir.com/stations.html。)