//首先使用new Ext.menu.Menu()創(chuàng)建了一個菜單對象，然后再調(diào)用菜單對象的add方法來加入菜單項，add方法可以一次性加入多個菜單項，每一個菜單項可以是一個Ext.menu.Item對象，也可以是用于構(gòu)造Ext.menu.Item的配置對象，這里直接使用的是菜單項描述對象。在菜單項中，我們又使用menu屬性來定義了“文件”、“編輯”兩個菜單項的二級菜單。
//在定義完了菜單并加入菜單項后，我們定義了hello這個DOM元素的click事件響應(yīng)函數(shù)，在響應(yīng)函數(shù)中調(diào)用菜單對象menu的show方法來顯示菜單,show方法中包含一個參數(shù)，表示讓菜單顯示在哪兒。 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);
}
);
顯示效果  二、帶單選、復(fù)選框的菜單 JScript 代碼 復(fù)制 
//在上面的代碼中，首先使用new Ext.menu.Menu()來創(chuàng)建了一個菜單對象，在使用add方法添加菜單項的時候，“字號”菜單的二級菜單項是CheckItem對象，里面通過設(shè)置group屬性使得該菜單項成為單選菜單項，因為“字號”同一時刻只能選擇一種；“字體”菜單的二級菜單項同樣是使用CheckItem來創(chuàng)建，由于沒有指定group屬性，因些該菜單項就是復(fù)選菜單項。
//另外，還使用new Ext.menu.TextItem來創(chuàng)建文本菜單項，文本菜單項也可以直接使用字符串代表，比如“文本菜單項2”，而文本內(nèi)容為“-”的文本菜單項表現(xiàn)出來會成來菜單項分隔符。
var menu=new Ext.menu.Menu();
 menu.add({
 text:"字號",
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("文本菜單項1"),
"文本菜單項2"
);
var h=Ext.get("hello");
h.on("click",function(e)...{
menu.show(h);
});
效果圖 三、Ext.menu.Menu 菜單的綜合實例 1.菜單的定義 JScript 代碼 復(fù)制
//下定義一個下拉列表
var combo = Ext.create('Ext.form.ComboBox', {
store: new Ext.data.ArrayStore({
fields: ['id', 'name'],
data: [[1, "張三"], [2, "李四"], [3, "王五"], [4, "趙六"]]
}),
displayField: 'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: '請選擇..',
selectOnFocus: true,
width: 135
});
//這里是菜單的定義
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
style: {
overflow: 'visible'
},
items: [
combo,
{
text: '復(fù)選框',
checked: true
}, '-', {
text: '單選子菜單',
menu: {
items: [
'<b>請選擇一個人名</b>',
{
text: '張三',
checked: true,
group: 'theme'
}, {
text: '李四',
checked: false,
group: 'theme',
checkHandler: function () {
Ext.MessageBox.alert("消息", "李四被選擇！")
}
}, {
text: '王五',
checked: false,
group: 'theme'
}, {
text: '趙六',
checked: false,
group: 'theme'
}
]
}
}, {
text: '請選擇一個日期',
menu: Ext.create('Ext.menu.DatePicker', {
handler: function (dp, date) {
Ext.MessageBox.alert('消息', '你選擇了:' + date.format('Y-m-d'));
}
})
}, {
text: '選擇一個顏色',
menu: Ext.create('Ext.menu.ColorPicker', {
handler: function (cm, color) {
Ext.MessageBox.alert('消息', '你選擇了：' + color);
}
})
}
]
});
//把菜單附加到工具欄上
var panel = new Ext.Panel({
renderTo: 'div1',
width: 600,
height: 250,
collapsible: true,
layout: 'fit',
title: '演示工具欄',
tbar: [{ text: "菜單", menu: menu}]
});
效果圖 |
