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



 在实际的软件开发中,我们的grid表格为了方便用户通常会有一个右键菜单来实现对表格的增、删、改等操作,其实只需要2步就可轻松实现gfJ思考者日记网-束洋洋个人博客

第一、创建一个Ext.menu.MenugfJ思考者日记网-束洋洋个人博客

//表格右键菜单  
    var contextmenu = new Ext.menu.Menu({  
        id:'theContextMenu',  
        items:[{  
            text:'查看详情',  
            handler:function(){  
                Ext.Msg.alert("系统提示","测试");  
            }  
        }]  
    });

 gfJ思考者日记网-束洋洋个人博客

 gfJ思考者日记网-束洋洋个人博客

第二、监听表格的Ext.menu.Menu事件gfJ思考者日记网-束洋洋个人博客

grid.on("itemcontextmenu",function(view,record,item,index,e){  
        e.preventDefault();  
        contextmenu.showAt(e.getXY());  
    });

 gfJ思考者日记网-束洋洋个人博客

 gfJ思考者日记网-束洋洋个人博客

OK,一切大功告成。gfJ思考者日记网-束洋洋个人博客

00.jpggfJ思考者日记网-束洋洋个人博客

以下是完整可以运行的代码,可以复制下来跑一下:gfJ思考者日记网-束洋洋个人博客

<%@ 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>  

 gfJ思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridgfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridgfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditinggfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格gfJ思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldgfJ思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件gfJ思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorgfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 gfJ思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解gfJ思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目gfJ思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈