學習YUI Ext 第三天 EXT Menu元件

原文出處

概述: 講講如何使用ext選單器件

這篇教程中，我們將學習使用ext的選單器件（menu widgets)。假設讀者已經閱讀過ext簡介一文，並懂得一些ext的基本相關知識。選單器件是ext庫中較遲實現的器件。它由幾個類聯合構成，使得建立乙個選單只需若干**塊（block of code）。

ext.onready(function() );

在ext的介紹中，我們討論過使用ext的原因和ext.onready()函式的功能。

先看看怎麼做乙個基本的選單，然後再討論**中的各個元件和知識點。加入下列**到onready函式中:

var menu = new ext.menu.menu(,
new ext.menu.item(),
'-',
new ext.menu.checkitem(),
new ext.menu.checkitem()
]});var tb = new ext.*******('*******', [
]);function clickhandler() 
function checkhandler()

ok 仔細看看這裡的**，首先例項化乙個menu類為變數「menu」。然後menu的構建函式接受一串的object literal作為引數，在先前的ext教程中我們已經討對objectliteral進行了解。當前的objectliteral就包含了我們選單中想要的屬性。第乙個屬性是我們分配的id，稍後我們可用id來獲取menu的引用。屬性「items」可能是最重要的屬性當中的乙個。留意一下語法其實我們是將乙個陣列作為值（value)傳到屬性中去。陣列裡的資料就是我們想要在選單中出現的每一項。每本例中我們放了六個選單項，但何解每項的語法（syntax）都不盡相同呢？第一項是一串object literal，包含一組我們可配置的name/value。ext的底層庫會為這串object literal按其配置預設地建立item物件。接著第二項是item物件本身，後面跟著分隔符，最後兩個是單選框項。整個過程演示了ext widget如何動態的執行。下例各項可填入到陣列中：

// ext 轉換這個配置物件到menu item
'straight text' //文字或原始html (純文字)
'-' // 建立分隔符
new ext.menu.item() // 建立乙個標準item (同)
new ext.menu.checkitem() // 建立單選框item
new ext.menu.dateitem() // 建立menu內建的日曆控制項
new ext.menu.coloritem() //建立乙個顏色採集器
new ext.menu.baseitem(document.getelementbyid('my-div')) //允許你加入任何元素

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文件中。

so,建立好的menu物件已經有兩個基本的item了，然而我們怎麼把它們擺放到頁面中呢?在ui中乙個menu可以分配到多個位置（同乙個物件，不同位置多次使用），這正是ext如此強大的原因：每乙個器件（widget）切成「一塊一快」的類，來構建整個物件導向的動態結構（structure）。這意味著menu可用於不同的場合。我們可將menu放到有按鈕的*******中，或用頁面中的乙個按鈕來展開menu，甚至可在ext的其它器件中（widgets）使用menu作為上下文選單（context menu）。

本例中分配乙個menu到*******中：

var tb = new ext.*******('*******', [
]);

ext.*******構建函式接受兩個引數，第乙個是指定*******的容器（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分配的不同方式，看看有關的細節是怎樣的。so,因為menu屬性可以以不同方式地分配，即是可以賦予乙個menu物件，或是已經建好的menuid，或直接是乙個menu config物件。你應該有機會就嘗試一下以多種方式建立menu，因為類似的方式方法在ext的widgets隨處可見。下面的**演示了如何用不同的方法來做出跟範例一樣的效果，唯一相同的就是menu物件的config。選單中包括兩個子選單、乙個dataitem容器、乙個coloritem容器。另外注意event handing函式需兩個引數來獲取事件更多的資訊和知道哪個item被單擊了。可以的話，把下面的**也加入到onready函式中，親身體驗一下：

var datemenu = new ext.menu.datemenu(
});var colormenu = new ext.menu.menu(})]
});var tb = new ext.*******('*******', [, ,
'-',
new ext.menu.checkitem(),
new ext.menu.checkitem(),
'-', , ]}
}]);function clickhandler(item, e) 
function checkhandler(item, e)

注意：留意幾種不同的方法加入子選單！還有even handing函式和coloritem、datamenu匿名函式之間的區別。

ok我們用上述的方法，建立了*******和menu，看起來應該是這樣的：

上文提及menu可擺放在ui的任何位置，這裡將為你演示menu如何與*******s、meneubuttons、context menus's配合工作，包括一些有用的方法和動態新增的功能。

menubutton

new ext.menubutton('menubutton', );

這條*******有兩個按鈕。乙個分隔符，和乙個純圖示的按鈕（附quicktips）。你可嘗試這樣做，把zip檔案中.gif加入

ext.quicktips.init();
tb.add('-', );

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

// menus更多的api內容
// 動態 增、減元素
menu.addseparator(); //動態加入分隔符
var item = menu.add();
// items 完整支援observable api
item.on('click', onitemclick);
// items can easily be looked up
menu.add();
// 用 id 或 index訪問
menu.items.get('disableme').disable();

現在你已經了解選單元件是如何工作了。下面的資源有助您進一步更深入學習選單：

學習YUI Ext 第三天 EXT Menu元件

學習第三天

學習第三天

學習第三天

學習YUI Ext 第三天 EXT Menu元件

學習第三天

學習第三天

學習第三天

相關推薦