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

最新推荐文章于 2024-07-29 14:22:26 发布
最新推荐文章于 2024-07-29 14:22:26 发布
阅读量98 收藏
点赞数
文章标签： java javascript ViewUI
原文链接：https://yq.aliyun.com/articles/471692
版权

在实际的软件开发中，我们的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，如需转载请自行联系原作者


weixin_34210740
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ext grid 添加右击菜单
12-02
代码如下:grid . addListener ( ‘rowcontextmenu’ , rightClickFn ); // 右键菜单代码关键部分 //Menu 建立 var rightClick = new Ext . menu . Menu ({ id : ‘rightClickCont’ , // 在 HTML 文件中必须有个 rightClickCont 的 DIV 元素 items : [{ id : ‘rMenu1’ , handler : rMenu1Fn , // 点击后触发的事件 text : ‘ 右键菜单 1’ }, { id : ‘rMenu2’ , handler :
Extjs给控件添加右键菜单
huoyunshen的专栏
07-28 726
//以 grid 为例 Ext.onReady(function(){ Vargrid = new Ext.grid.GridPanel({ Title:’表格实例’, renderTo:Ext.getBody(), //定义导入数据源到表格 Store:store, ...
Extjs 右键菜单创建问题
weixin_33832340的博客
12-03 71
最近用ext js 创建一个右键菜单效果，我在xtype=pannel上面测试成功 Ext.onReady(function () { var pan = Ext.create('Ext.window.Window', { width: 800, title: '我的面板', render...
EXTJS表格控件Grid的使用
wang_tao219的博客
06-05 1079
二、表格控件Grid的使用 EXT中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。我们首先介绍如何制作一个简单的Grid。 1、创建表格的列信息： view plaincopy to clipboardprint? 1.      var cm=new Ext.grid.ColumnModel([   2.           {h
EXTJS GridPanel 右键复制当前选中单元格
without0815的专栏
08-26 2049
EXTJS中复制Grid中当前单元格的内容是一个比较常见的需求，最常见的解决方法就是添加新的css样式，具体可以参考：http://blog.csdn.net/dy_paradise/article/details/5212389         其实呢不用这么麻烦的，EXTJS API其实提供了相应的事件让开发者可以通过添加监听事件来到达选中当前单元格并取得当前单元格的内容。下面以右击为例(左
Extjs4.2 Grid filter Demo 表格过滤实验
08-13
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹，其余文件过大并且与主题无关,因此未包含。具体方法，请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
解决EXTJS4.2的tabpanel右键关闭的BUG
09-17
EXTJS4.2官网上的tabpanel的右键关闭当前页，关闭其它，关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件，只要替换当前4.2的那个文件就可以使用了！
ExtJs grid行 右键菜单的两种方法
10-29
在ExtJs中，创建一个Grid并为其添加右键菜单是常见的需求，特别是在开发富客户端应用时。本篇文章将介绍两种实现ExtJs grid行右键菜单的方法。这两种方法都是基于ExtJs框架的功能，允许用户在点击网格行时显示自定义...
EXTJS4.2学习入门教程
05-30
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程
ExtJS4.2学习API及样例
04-30
里面有demo以及API说明，可以当工具书以及学习使用
ExtJS：GridPanel之renderer:function()和itemdblclick : function()方法参数详解
weixin_30745553的博客
12-26 220
要使用GridPanel，首先要定义Store，而在创建Store的时候必须要有Model，因此我们首先来定义Model：Ext.define("Gpsdata", { extend: "Ext.data.Model", fields: [ { name: 'gpstime', type: 'string' }, { name: 'gpstemp...
使用hutool工具判断字符串是否全部是字母(包括大小写)，java判断字符串是否全部是字母(包括大小写)
最新发布
qq_43700885的博客
07-29 310
1.导入hutool的maven依赖。2.复制一下代码执行。
golang 接口
m0_70982551的博客
07-24 1092
接口定义了一组方法，这些方法没有具体的实现。接口类型的变量可以存储任何实现了这些方法的类型的值。// 更多方法...在Go语言中，接口值是指存储了实现某个接口的具体类型值的变量。接口值由两部分组成：1.动态类型：这是接口值当前存储的实际类型。2.动态值：这是实际存储的值，该值必须实现了接口中定义的所有方法。
java判断邮箱地址是否正确，使用hutool工具判断邮箱地址是否正确
qq_43700885的博客
07-29 145
1.导入hutool的maven依赖。2.直接复制一下代码运行。
Swagger使用Map接受参数时，页面如何显示具体参数及说
a1058926697的博客
07-26 589
后端使用Map接受参数，要求在swagger页面上显示具体的参数名称、类型及说明。当Map接受参数数量少时，可以使用Swagger自带的注解。自定义注解 @ApiGlobalModel。编写处理注解对应的插件。
Java读取文件中多个JSON对象，并且16进制字符串和byte相互转换，将byte转为16进制字符串并写入json文件
weixin_43561432的博客
07-24 346
【代码】Java读取文件中多个JSON对象，并且16进制字符串和byte相互转换，将byte转为16进制字符串并写入json文件。
Java的@DateTimeFormat注解与@JsonFormat注解的使用对比
訾博（ZiBo）的博客
07-27 713
在Spring和Jackson框架中，日期和时间格式化是一个常见需求。注解主要用于Spring的表单绑定，而注解则用于Jackson的JSON序列化和反序列化。了解这两个注解的使用场景和方法，可以帮助开发者更高效地处理日期和时间。和是处理日期和时间格式化的两个重要注解。主要用于Spring MVC的请求参数绑定，而主要用于Jackson的JSON序列化和反序列化。了解它们的使用场景和功能，可以帮助开发者更高效地处理日期和时间格式化需求。通过本文的介绍，希望读者能够更清晰地理解和。
Java修炼 2024.7.26 0:24
2301_80011650的博客
07-26 458
问题：编写一个方法，找出一个数组中的众数（出现次数超过数组长度一半的元素）。例如，输入 [2, 2, 1, 1, 2]，输出 2。编写一个方法，找出一个整数数组中的第二大元素。例如，输入 [3, 5, 1, 8, 7]，输出 7。例如，输入 5，输出 5。问题：编写一个方法，将给定的字符串逆转。问题：使用数组实现栈，并提供基本操作（push、pop、peek、isEmpty）。问题：实现一个单向链表，并提供基本的操作（添加、删除、查找元素）。问题：编写一个方法来查找一个给定字符串的所有子串。
Java代码基础算法练习-数的特性-2024.07.25
Sakurapaid的博客
07-25 406
小A喜欢两种性质都成立的数字，小B喜欢至少符合一种性质的数字，小C喜欢不符合这两种性质的 数字。给出一个数字，请输出三个人是否喜欢这个数字。如果喜欢输出1，否则输出0，用空格分隔。输入数字 num，先定义三个整型代表三个人的喜欢与否，先默认设为 0。之后判断num对于性质1、2的条件，分别用 boolen 类型标识。对于每个整型进行判断，是否改为 1 代表喜欢。性质2：大于4且不大于12;
ExtJS4.2表格分页教程：通过后台脚本获取数据
本篇文章以ExtJS4.2版本为例，探讨如何实现表格的分页功能，并通过后台脚本获取数据。 首先，ExtJS的表格控件允许开发者配置分页工具条（paging toolbar），它提供页码导航和每页记录数选择，使得用户能够方便地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值