ExtJS4.2学习(12)基于表格的右键菜单
2013-12-14 21:05
891 查看
在实际的软件开发中,我们的grid表格为了方便用户通常会有一个右键菜单来实现对表格的增、删、改等操作,其实只需要2步就可轻松实现
第一、创建一个Ext.menu.Menu
![](http://img2.51cto.com/attachments/month_1312/20131210_da73ca25e06c5340dde4SdR4SQP7D0mC.jpg)
以下是完整可以运行的代码,可以复制下来跑一下:
第一、创建一个Ext.menu.Menu
//表格右键菜单 var contextmenu = new Ext.menu.Menu({ id:'theContextMenu', items:[{ text:'查看详情', handler:function(){ Ext.Msg.alert("系统提示","测试"); } }] });第二、监听表格的Ext.menu.Menu事件
grid.on("itemcontextmenu",function(view,record,item,index,e){ e.preventDefault(); contextmenu.showAt(e.getXY()); });K,一切大功告成。
![](http://img2.51cto.com/attachments/month_1312/20131210_da73ca25e06c5340dde4SdR4SQP7D0mC.jpg)
以下是完整可以运行的代码,可以复制下来跑一下:
<%@ 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>
相关文章推荐
- ExtJS4.2学习(12)基于表格的右键菜单(转)
- ExtJS4.2学习(13)基于表格的扩展插件---rowEditing
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- 基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
- 基于JavaScript实现右键菜单和拖拽功能
- 基于Bootstrap右键菜单的简单实现
- 【WPF实用技巧】DataGrid右键菜单复制表格数据
- 基于JavaScript实现智能右键菜单
- SNF快速开发平台MVC-EasyUI3.9之-DataGrid表格控件如何增加右键菜单
- 基于FineUI Grid控件添加右键菜单
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- MFC基于对话框——右键弹出菜单,并响应函数
- 如何让natTable表格支持自定义多个右键菜单
- pyqt中QwebView中消除默认的右键菜单(基于QT设计师)
- ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2
- MFC基于对话框——右键弹出菜单,并响应函数
- MFC基于对话框最小化到托盘,并鼠标右键添加菜单以及对应菜单功能
- 基于jquery封装的一个简单web右键菜单
- EasyUI 表格点击右键添加或刷新 绑定右键菜单
- JTable表格头右键菜单实现列标题隐藏显示功能