//首先使用new Ext.menu.Menu()创建了一个菜单对象，然后再调用菜单对象的add方法来加入菜单项，add方法可以一次性加入多个菜单项，每一个菜单项可以是一个Ext.menu.Item对象，也可以是用于构造Ext.menu.Item的配置对象，这里直接使用的是菜单项描述对象。在菜单项中，我们又使用menu属性来定义了“文件”、“编辑”两个菜单项的二级菜单。
//在定义完了菜单并加入菜单项后，我们定义了hello这个DOM元素的click事件响应函数，在响应函数中调用菜单对象menu的show方法来显示菜单,show方法中包含一个参数，表示让菜单显示在哪儿。 var menu=new Ext.menu.Menu();
menu.add({
text:"文件",
menu:[
{text:"打开"},
{text:"保存"},
{text:"关闭"}]
},
{
text:"编辑",
menu:[
{text:"复制"},
{text:"拷贝"}]
}
);
var h=Ext.get("hello");
h.on("click",function(e){
menu.show(h);
}
);
显示效果  二、带单选、复选框的菜单 JScript 代码 复制 
//在上面的代码中，首先使用new Ext.menu.Menu()来创建了一个菜单对象，在使用add方法添加菜单项的时候，“字号”菜单的二级菜单项是CheckItem对象，里面通过设置group属性使得该菜单项成为单选菜单项，因为“字号”同一时刻只能选择一种；“字体”菜单的二级菜单项同样是使用CheckItem来创建，由于没有指定group属性，因些该菜单项就是复选菜单项。
//另外，还使用new Ext.menu.TextItem来创建文本菜单项，文本菜单项也可以直接使用字符串代表，比如“文本菜单项2”，而文本内容为“-”的文本菜单项表现出来会成来菜单项分隔符。
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 代码 复制
//下定义一个下拉列表
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: '复选框',
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}]
});
效果图 |
