學習EXT第三天:Menu組件

這篇教程中，我們將學習使用Ext的菜單器件（Menu Widgets)。假設讀者已經閱讀過Ext簡介一文，並懂得一些Ext的基本相關知識。菜單器件是Ext庫中較遲實現的器件。它由幾個類聯合構成，使得創建一個菜單隻需若干代碼塊（Block of code）。

開始！

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

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

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

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

創建簡易的菜單

先看看怎麼做一個基本的菜單，然後再討論代碼中的各個組件和知識點。加入下列代碼到onReady函數中:

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();
tb.render('toolbar');

tb.add(...{
text:'Button w/ Menu',
menu: menu  // assign menu by instance
});

function clickHandler() ...{
alert('Clicked on a menu item');
}

function checkHandler() ...{
alert('Checked a menu item');
}

OK 仔細看看這裏的代碼，首先實例化一個Menu類爲變量“menu”。然後Menu的構建函數接受一串的Object Literal作爲參數，在先前的Ext教程中我們已經討對ObjectLiteral進行了解。當前的ObjectLiteral就包含了我們菜單中想要的屬性。第一個屬性是我們分配的ID，稍後我們可用ID來獲取Menu的引用。 

各種Item的類型

屬性“items”可能是最重要的屬性當中的一個。留意一下語法其實我們是將一個數組作爲值（value)傳到屬性中去。數組裏的數據就是我們想要在菜單中出現的每一項。每本例中我們放了六個菜單項，但何解每項的語法（Syntax）都不盡相同呢？第一項是一串Object Literal，包含一組我們可配置的name/value。Ext的底層庫會爲這串Object Literal按其配置默認地創建item對象。接着第二項是Item對象本身，後面跟着分隔符，最後兩個是單選框項。整個過程演示了Ext Widget如何動態的運行。下例各項可填入到數組中：

{text: 'Foo'}                        // Ext 轉換這個配置對象到menu item
'Straight Text'                      //文本或原始html (純文字)
'-'                                  // 創建分隔符
new Ext.menu.Item({text: 'Foo'})     // 創建一個標準item (同{text: 'Foo'})
new Ext.menu.CheckItem()             // 創建單選框item
new Ext.menu.DateItem()              // 創建menu內置的日曆控件
new Ext.menu.ColorItem()             //創建一個顏色採集器
new Ext.menu.BaseItem(document.getElementById('my-div')) //允許你加入任何元素

Item屬性

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

 

text: 'An item',
handler: clickHandler

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

 

cls: 'a-class-name'   ,        // 爲標準Item手動設置樣式和圖標ICON
icon: 'url',                  // 如不想用CSS,可直接設置圖標的URL
group: 'name of group',       //只適用多選項，保證只有一項被選中

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

在UI中擺放菜單

So,創建好的Menu對象已經有兩個基本的item了，然而我們怎麼把它們擺放到頁面中呢?在UI中一個menu可以分配到多個位置（同一個對象，不同位置多次使用），這正是Ext如此強大的原因：每一個器件（widget）切成“一塊一快”的類，來構建整個面向對象的動態結構（Structure）。這意味着menu可用於不同的場合。我們可將menu放到有按鈕的toolbar中，或用頁面中的一個按鈕來展開menu，甚至可在Ext的其它器件中（widgets）使用menu作爲上下文菜單（Context Menu）。

本例中分配一個menu到toolbar中：

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

Ext.Toolbar構建函數接受兩個參數，第一個是指定toolbar的容器（contrainer）；第二個參數是包含全部按鈕的數組。這裏,我們只使用一個按鈕,正如所見，按鈕實質上是一串由數組組成的Object Literal,同時這個Object Litetal亦包含了不同的屬性。下面是一組按鈕對象的Object Litetal屬性：

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

Menu的分配方式：

剛纔談到如何分配Menu到工具條中（toolbar），繼而亦討論menu分配的不同方式，看看有關的細節是怎樣的。So,因爲menu屬性可以以不同方式地分配，即是可以賦予一個menu對象，或是已經建好的menuID，或直接是一個menu config對象。你應該有機會就嘗試一下以多種方式創建menu，因爲類似的方式方法在Ext的Widgets隨處可見。下面的代碼演示瞭如何用不同的方法來做出跟範例一樣的效果，唯一相同的就是menu對象的config。菜單中包括兩個子菜單、一個DataItem容器、一個ColorItem容器。另外注意event handing函數需兩個參數來獲取事件更多的信息和知道哪個item被單擊了。可以的話，把下面的代碼也加入到onReady函數中，親身體驗一下：

 

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函數和Coloritem、DataMenu匿名函數之間的區別。

練一練

Ok我們用上述的方法，創建了toolbar和menu，看起來應該是這樣的：

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

 

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

動態添加菜單按鈕到Toolbar

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

 

Ext.QuickTips.init();

tb.add('-', {
     icon: 'list-items.gif', //圖標可單行顯示
     cls: 'x-btn-icon',       // 純圖標
     tooltip: 'Quick Tips提示文字'
});

更方便的是

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

// Menus更多的API內容
// 動態 增、減元素

menu.addSeparator(); //動態加入分隔符

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'   // <-- 設置ID便於查找lookup
     // disabled: true    <-- 先不disabled 而採用下面的方式
});

// 用 id 或 index訪問
menu.items.get('disableMe').disable();