翻譯：Frank

概述: 講講如何使用Ext菜單器件

這篇教程中，我們將學(xué)習(xí)使用Ext的菜單器件（Menu Widgets)。假設(shè)讀者已經(jīng)閱讀過(guò)Ext簡(jiǎn)介一文，并懂得一些Ext的基本相關(guān)知識(shí)。菜單器件是Ext庫(kù)中較遲實(shí)現(xiàn)的器件。它由幾個(gè)類聯(lián)合構(gòu)成，使得創(chuàng)建一個(gè)菜單只需若干代碼塊（Block of code）。

開(kāi)始！

第一步要做的是，下載本教程的示例文件。Zip文件包括三個(gè)文件：ExtMenu.html,、ExtMenu.js、ExtMenu.css、和list-items.gif。解包這四個(gè)文件到Ext的安裝目錄中（例如，Ext是在“C:\code\Ext\v1.0”中，那應(yīng)該在"v1.0"里面新建目錄“menututorial”。雙擊ExtMenu.htm，接著你的瀏覽器打開(kāi)啟動(dòng)頁(yè)面，應(yīng)該會(huì)有一條消息告訴你配置已完畢。如果是一個(gè)Javascript錯(cuò)誤，請(qǐng)按照頁(yè)面上的指引操作。

在你常用的IDE中或文本編輯器中，打開(kāi)ExtMenu.js看看：

Ext.onReady(function() {
alert("You have Ext configured correctly! We are now ready to do some Ext Menu Magic!");
});

在Ext的介紹中，我們討論過(guò)使用Ext的原因和Ext.onReady()函數(shù)的功能。

創(chuàng)建簡(jiǎn)易的菜單

先看看怎么做一個(gè)基本的菜單，然后再討論代碼中的各個(gè)組件和知識(shí)點(diǎn)。加入下列代碼到onReady函數(shù)中:

var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: menu  // 分配menu到按鈕
}
]);
function clickHandler() {
alert('Clicked on a menu item');
}
function checkHandler() {
alert('Checked a menu item');
}

OK 仔細(xì)看看這里的代碼，首先實(shí)例化一個(gè)Menu類為變量“menu”。然后Menu的構(gòu)建函數(shù)接受一串的Object Literal作為參數(shù)，在先前的Ext教程中我們已經(jīng)討對(duì)ObjectLiteral進(jìn)行了解。當(dāng)前的ObjectLiteral就包含了我們菜單中想要的屬性。第一個(gè)屬性是我們分配的ID，稍后我們可用ID來(lái)獲取Menu的引用。

 

各種Item的類型

屬性“items”可能是最重要的屬性當(dāng)中的一個(gè)。留意一下語(yǔ)法其實(shí)我們是將一個(gè)數(shù)組作為值（value)傳到屬性中去。數(shù)組里的數(shù)據(jù)就是我們想要在菜單中出現(xiàn)的每一項(xiàng)。每本例中我們放了六個(gè)菜單項(xiàng)，但何解每項(xiàng)的語(yǔ)法（Syntax）都不盡相同呢？第一項(xiàng)是一串Object Literal，包含一組我們可配置的name/value。Ext的底層庫(kù)會(huì)為這串Object Literal按其配置默認(rèn)地創(chuàng)建item對(duì)象。接著第二項(xiàng)是Item對(duì)象本身，后面跟著分隔符，最后兩個(gè)是單選框項(xiàng)。整個(gè)過(guò)程演示了Ext Widget如何動(dòng)態(tài)的運(yùn)行。下例各項(xiàng)可填入到數(shù)組中：

{text: 'Foo'}                       // Ext 轉(zhuǎn)換這個(gè)配置對(duì)象到menu item
'Straight Text'                     //文本或原始html (純文字)
'-'                                 // 創(chuàng)建分隔符
new Ext.menu.Item({text: 'Foo'})    // 創(chuàng)建一個(gè)標(biāo)準(zhǔn)item (同{text: 'Foo'})
new Ext.menu.CheckItem()            // 創(chuàng)建單選框item
new Ext.menu.DateItem()             // 創(chuàng)建menu內(nèi)置的日歷控件
new Ext.menu.ColorItem()            //創(chuàng)建一個(gè)顏色采集器
new Ext.menu.BaseItem(document.getElementById('my-div')) //允許你加入任何元素

Item屬性

Item接受什么類型的屬性呢？本例中我們使用了這兩屬性：

text: 'An item',
handler: clickHandler

第一個(gè)是Item的文本。第二個(gè)是當(dāng)用戶單擊一單擊Item所觸發(fā)的事件處理函數(shù)（event handler function）。本例中我們將函數(shù)clickHandler()和checkHandler()定義在代碼的最后。作為演示用途，這僅僅是用alert()通知你有一個(gè)單擊的消息。
其它有用的屬性是：

cls: 'a-class-name'  ,       // 為標(biāo)準(zhǔn)Item手動(dòng)設(shè)置樣式和圖標(biāo)ICON
icon: 'url',                 // 如不想用CSS,可直接設(shè)置圖標(biāo)的URL
group: 'name of group',      //只適用多選項(xiàng)，保證只有一項(xiàng)被選中

完整的item屬性列表在Menu Item文檔中。

在UI中擺放菜單

So,創(chuàng)建好的Menu對(duì)象已經(jīng)有兩個(gè)基本的item了，然而我們?cè)趺窗阉鼈償[放到頁(yè)面中呢?在UI中一個(gè)menu可以分配到多個(gè)位置（同一個(gè)對(duì)象，不同位置多次使用），這正是Ext如此強(qiáng)大的原因：每一個(gè)器件（widget）切成“一塊一快”的類，來(lái)構(gòu)建整個(gè)面向?qū)ο蟮膭?dòng)態(tài)結(jié)構(gòu)（Structure）。這意味著menu可用于不同的場(chǎng)合。我們可將menu放到有按鈕的toolbar中，或用頁(yè)面中的一個(gè)按鈕來(lái)展開(kāi)menu，甚至可在Ext的其它器件中（widgets）使用menu作為上下文菜單（Context Menu）。

本例中分配一個(gè)menu到toolbar中：

var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: menu  // 分配menu到toolbar
}
]);

Ext.Toolbar構(gòu)建函數(shù)接受兩個(gè)參數(shù)，第一個(gè)是指定toolbar的容器（contrainer）；第二個(gè)參數(shù)是包含全部按鈕的數(shù)組。這里,我們只使用一個(gè)按鈕,正如所見(jiàn)，按鈕實(shí)質(zhì)上是一串由數(shù)組組成的Object Literal,同時(shí)這個(gè)Object Litetal亦包含了不同的屬性。下面是一組按鈕對(duì)象的Object Litetal屬性：

cls: 'a-class-name'  ,      //手動(dòng)設(shè)置樣式和圖標(biāo)ICON
icon: 'url',                // 如不想用CSS,可直接設(shè)置圖標(biāo)的URL
text:'Our first Menu',      // 按鈕提示之文字
menu: menu                  // 可以是menu之id或配置對(duì)象

Menu的分配方式：

剛才談到如何分配Menu到工具條中（toolbar），繼而亦討論menu分配的不同方式，看看有關(guān)的細(xì)節(jié)是怎樣的。So,因?yàn)閙enu屬性可以以不同方式地分配，即是可以賦予一個(gè)menu對(duì)象，或是已經(jīng)建好的menuID，或直接是一個(gè)menu config對(duì)象。你應(yīng)該有機(jī)會(huì)就嘗試一下以多種方式創(chuàng)建menu，因?yàn)轭愃频姆绞椒椒ㄔ贓xt的Widgets隨處可見(jiàn)。下面的代碼演示了如何用不同的方法來(lái)做出跟范例一樣的效果，唯一相同的就是menu對(duì)象的config。菜單中包括兩個(gè)子菜單、一個(gè)DataItem容器、一個(gè)ColorItem容器。另外注意event handing函數(shù)需兩個(gè)參數(shù)來(lái)獲取事件更多的信息和知道哪個(gè)item被單擊了。可以的話，把下面的代碼也加入到onReady函數(shù)中，親身體驗(yàn)一下：

var dateMenu = new Ext.menu.DateMenu({
handler : function(datepicker, date){
alert('Date Selected', 'You chose: '+ date.format('M j, Y'));
}
});
var colorMenu = new Ext.menu.Menu({
id: 'colorMenu', // the menu's id we use later to assign as submenu
items: [
new Ext.menu.ColorItem({
selectHandler: function(colorpicker, color){
alert('Color Selected', 'You chose: ' + color);
}
})
]
});
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: {
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
}, {
text: 'Another item',
handler: clickHandler
},
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
}),
'-', {
text: 'DateMenu as submenu',
menu: dateMenu, // assign the dateMenu we created above by variable reference,
handler: date
}, {
text: 'Submenu with ColorItem',
menu: 'colorMenu'    // we assign the submenu containing a ColorItem using it's id
}
]
}
}
]);
function clickHandler(item, e) {
alert('Clicked on the menu item: ' + item.text);
}
function checkHandler(item, e) {
alert('Checked the item: ' + item.text);
}

注意：留意幾種不同的方法加入子菜單！還有even handing函數(shù)和Coloritem、DataMenu匿名函數(shù)之間的區(qū)別。

上文提及menu可擺放在UI的任何位置，這里將為你演示menu如何與Toolbars、MeneuButtons、Context Menus's配合工作，包括一些有用的方法和動(dòng)態(tài)添加的功能。

MenuButton

new Ext.MenuButton('menubutton', {text:'Menu Button 1', menu: dateMenu});

動(dòng)態(tài)添加菜單按鈕到Toolbar

這條Toolbar有兩個(gè)按鈕。一個(gè)分隔符，和一個(gè)純圖標(biāo)的按鈕（附Quicktips）。你可嘗試這樣做，把zip文件中.gif加入

Ext.QuickTips.init();
tb.add('-', {
icon: 'list-items.gif', //圖標(biāo)可單行顯示
cls: 'x-btn-icon',      // 純圖標(biāo)
tooltip: 'Quick Tips

提示文字'
});

更方便的是

一些代碼片段，有助你提高效率，留意注釋！

// Menus更多的API內(nèi)容
// 動(dòng)態(tài) 增、減元素
menu.addSeparator(); //動(dòng)態(tài)加入分隔符
var item = menu.add({
text: 'Dynamically added Item'
});
// items 完整支持Observable API
item.on('click', onItemClick);
// items can easily be looked up
menu.add({
text: 'Disabled Item',
id: 'disableMe'  // <-- 設(shè)置ID便于查找lookup
// disabled: true   <-- 先不disabled 而采用下面的方式
});
// 用 id 或 index訪問(wèn)
menu.items.get('disableMe').disable();

本文轉(zhuǎn)自:http://www.ajaxjs.com/yuicn/article.asp?id=20075196

---------------------------------------------------------------------------------------------------------------------------------
說(shuō)人之短，乃護(hù)己之短。夸己之長(zhǎng)，乃忌人之長(zhǎng)。皆由存心不厚，識(shí)量太狹耳。能去此弊，可以進(jìn)德，可以遠(yuǎn)怨。
http://www.aygfsteel.com/szhswl
------------------------------------------------------------------------------------------------------ ----------------- ---------