【www.bbyears.com--extjs】
菜单的定义
下面我们来定义一个菜单，它包括一个下拉列表，还有颜色选择器，日期选择器等菜单项。
[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);
}
})
}
]
});
2.把菜单附加到面板工具栏
我们定义一个面板，然后通过刚刚定义的菜单实现菜单栏。
[Js]
//把菜单附加到工具栏上
var panel = new Ext.Panel({
renderTo: "div1",
width: 600,
height: 250,
collapsible: true,
layout: "fit",
title: "演示工具栏",
tbar: [{ text: "菜单", menu: menu}]
});
下面看看展示效果：
2.实现右键菜单
还是用第一步定义的菜单，现在我们通过右键事件的方式实现右键菜单：
[Js]
//定义右键菜单
Ext.getDoc().on("contextmenu", function (e, o) {
e.preventDefault();
menu.showAt(e.getXY());
//第二种写法：
//e.stopEvent();
//menu.showAt([e.getPageX(), e.getPageY()]);
});
单击右键，效果如下：
3.在ListView中定义右键菜单
这里我们借用第11篇的ListView,我们要实现当数据行右键单击时，弹出菜单的效果。
[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;
}
}
}
});
在ListView中单击右键，效果如下：
