extjs4中Ext.menu.Menu 菜单功能实例代码

[Js]
//下定义一个下拉列表
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: [
'请选择一个人名',
{
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);
}
})
}
]
});

[Js]
//把菜单附加到工具栏上
var panel = new Ext.Panel({
renderTo: 'div1',
width: 600,
height: 250,
collapsible: true,
layout: 'fit',
title: '演示工具栏',
tbar: [{ text: "菜单", menu: menu}]
});

[Js]
//定义右键菜单
Ext.getDoc().on('contextmenu', function (e, o) {
e.preventDefault();
menu.showAt(e.getXY());

//第二种写法：
//e.stopEvent();
//menu.showAt([e.getPageX(), e.getPageY()]);
});

[Js]
var store = new Ext.data.JsonStore({
fields: [
{ name: 'IntData', type: 'int' },
{ name: 'StringData', type: 'string' },
{ name: 'TimeData', type: 'date' }
],
proxy: {
type: 'ajax',
url: 'ListView1Json',
reader: {
type: 'json',
root: 'rows'
}
},
sortInfo: { field: 'IntData', direction: 'DESC' }
});
store.load();

var listView = Ext.create('Ext.ListView', {
renderTo: "div1",
store: store,
multiSelect: true,
emptyText: '无数据',
reserveScrollOffset: true,
hideHeaders: false,
columns: [{
header: "IntData",
dataIndex: 'IntData'
}, {
header: "StringData",
dataIndex: 'StringData'
}, {
header: "TimeData",
dataIndex: 'TimeData',
align: 'right',
xtype: 'datecolumn',
format: 'm-d h:i a'
}],
viewConfig: {
stripeRows: true,
listeners: {
itemcontextmenu: function (view, rec, node, index, e) {
e.stopEvent();
menu.showAt(e.getXY());
return false;
}
}
}
});