ExtJS4.2学习(12)基于表格的右键菜单

简介:

在实际的软件开发中,我们的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,一切大功告成。
20131210_da73ca25e06c5340dde4SdR4SQP7D0m

以下是完整可以运行的代码,可以复制下来跑一下:

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,如需转载请自行联系原作者


相关文章
|
29天前
|
JavaScript
extjs表格行拖动插件
extjs表格行拖动插件
38 3
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
347 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
Dreamweaver中添加库、标签和属性
Dreamweaver中添加库、标签和属性
120 0
|
数据安全/隐私保护 .NET 开发框架
|
Web App开发 JavaScript
ExtJS学习(四)EditorGrid可编辑表格
操作表格有一种需求,要操作表格需要动态的添加内容,删除内容以及双击的时候进入编辑状态。这个时候怎么办呢,看具体的实现吧。
1466 0