更新时间:2022-08-12 19:54:05
在实际的软件开发中,我们的grid表格为了方便用户通常会有一个右键菜单来实现对表格的增、删、改等操作,其实只需要2步就可轻松实现
第一、创建一个Ext.menu.Menu
1
2
3
4
5
6
7
8
9
10
|
//表格右键菜单 var contextmenu = new Ext.menu.Menu({
id: 'theContextMenu' ,
items:[{
text: '查看详情' ,
handler: function (){
Ext.Msg.alert( "系统提示" , "测试" );
}
}]
});
|
第二、监听表格的Ext.menu.Menu事件
1
2
3
4
|
grid.on( "itemcontextmenu" , function (view,record,item,index,e){
e.preventDefault();
contextmenu.showAt(e.getXY());
});
|
K,一切大功告成。
以下是完整可以运行的代码,可以复制下来跑一下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< title >Hello Extjs4.2</ title >
< link href = "../ExtJS4.2/resources/css/ext-all.css" rel = "stylesheet" >
< script src = "../ExtJS4.2/ext-all.js" ></ script >
< script src = "../ExtJS4.2/locale/ext-lang-zh_CN.js" ></ script >
< script type = "text/javascript" >
//前几节已经说过了,这里属性不再赘述,只讲重点 Ext.onReady(function(){ var columns = [
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
];
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
var store = new Ext.data.ArrayStore({
data: data,
fields: [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
]
});
store.load();
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
store: store,
columns: columns
});
//表格右键菜单
var contextmenu = new Ext.menu.Menu({
id:'theContextMenu',
items:[{
text:'查看详情',
handler:function(){
Ext.Msg.alert("系统提示","测试");
}
}]
});
grid.on("itemcontextmenu",function(view,record,item,index,e){
e.preventDefault();
contextmenu.showAt(e.getXY());
});
}); </ script >
</ head >
< body >
< h1 >我的ExtJS4.2学习之路</ h1 >
< hr />
作者:束洋洋 开始日期:2013年11月20日 23:20:43 < h2 >深入浅出ExtJS之基于表格的右键菜单</ h2 >
< div id = "grid" ></ div >
</ body >
</ html >
|
本文转自shyy8712872 51CTO博客,原文链接:http://blog.51cto.com/shuyangyang/1340659,如需转载请自行联系原作者