ExtJs grid行 右键菜单的两种方法

在这下边: 方法一


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridContextMenu.aspx.cs" Inherits="gridContextMenu" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="< /FONT>http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.css" />
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>
<style type="text/css">
.panel_icon11 { background-image:url(images/first.gif)}
.center_icon { background-image:url(images/center.png)}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function ready()
{
var url = "jsonGrid.aspx?Param=select";
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel
([
sm,new Ext.grid.RowNumberer({header:"编号",width:50}),
{header:"编号",dataIndex:"ID",width:10,hidden:true},
{header:"标题",dataIndex:"TypeCName",width:100,editor:new Ext.form.TextField()},
{header:"英文名称",dataIndex:"TypeEName",width:100,editor:new Ext.form.TextField()},
{header:"状态",dataIndex:"DelFlag",width:100,renderer:function(value){if(value==false) {return "显示";} else {return "隐藏";}}},
{header:"添加日期",dataIndex:"AddDate",width:100,renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
cm.defaultSortable = true;
var fields =
[
{name:"ID"},
{name:"TypeCName"},
{name:"TypeEName"},
{name:"DelFlag"},
{name:"AddDate"}
];
var store = new Ext.data.Store
({
proxy:new Ext.data.HttpProxy({url:url}),
reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"root",fields:fields})
});
store.load({params:{start:0,limit:12}});
var pagingBar = new Ext.PagingToolbar
({
displayInfo:true,
emptyMsg:"没有数据显示",
displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
store:store,
pageSize:12
});
var grid = new Ext.grid.GridPanel
({
id:"MenuGridPanel",
renderTo:document.body,
layout:"fit",
frame:true,
border:true,
width:600,
height:360,
autoScroll:true,
store:store,
sm:sm,
cm:cm,
viewConfig:{forceFit: true},
title:'<img style="height:auto; width:auto;" src="images/first.gif" /> Ext2.2全新功能版系列之--右键菜单',
bbar:pagingBar
});
grid.on("rowcontextmenu",function(grid,rowIndex,e)
{
e.preventDefault();if(rowIndex<0){return;}
var treeMenu = new Ext.menu.Menu
([
{xtype:"button",text:"添加",icon:"Images/Icons/button/add.gif",pressed:true,handler:function(){}},
{xtype:"button",text:"编辑",icon:"Images/Icons/button/delete.gif",pressed:true,handler:function(){}},
{xtype:"button",text:"隐藏",icon:"Images/Icons/arrow-down.gif",pressed:true,handler:function(){}},
{xtype:"button",text:"显示",icon:"Images/Icons/arrow-up.gif",pressed:true,handler:function(){}},
{xtype:"button",text:"删除",icon:"Images/Icons/button/cross.gif",pressed:true, handler:function(){}},
{xtype:"button",text:"上传图片",icon:"Images/Icons/plugin_add.gif",pressed:true,handler:function(){}}
]);
treeMenu.showAt(e.getPoint());
});
}
</script>
<script type="text/javascript">
Ext.onReady(ready);
</script>
</div>
</form>
</body>
</html>

给 Extjs grid 加入右键菜单方法二。


代码如下:

grid.on("rowcontextmenu", function (grid, rowIndex, e) {
e.preventDefault();
if (rowIndex < 0) { return; }
var treeMenu = new Ext.menu.Menu
([
{
xtype: "",
text: "详细",
iconCls: 'context-dog',
pressed: false,
handler: function () {
//获得行数据
var record = grid.getStore().getAt(rowIndex);
//open_receive_detailWindow(record.data.smsIndex);
alert(record.data.company);
//record.data.taskId
}
}, {
xtype: "",
text: "删除",
iconCls: 'context-cat',
pressed: false,
handler: function () {
//获得行数据
var record = grid.getStore().getAt(rowIndex);
alert(record.data.company);
}
}
]);
treeMenu.showAt(e.getXY());
});

赞 (0)

相关推荐

  • 基于JavaScript实现右键菜单和拖拽功能

    下面先给大家介绍下js实现的右键菜单功能,具体详情如下所示: 这一章解决的问题 1.实现右键菜单功能代码. 2.阻止默认事件的实际应用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu {

  • 再次谈论React.js实现原生js拖拽效果引起的一系列问题

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘

  • 利用JS重写Cognos右键菜单的实现代码

    利用JS重写Cognos右键菜单的实现代码

    复制代码 代码如下: <!--菜单样式--> <STYLE type=text/css> .cMenu { BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 14px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 150px; CURSOR: default; COLO

  • js禁止页面复制功能禁用页面右键菜单示例代码

    <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: 复制代码 代码如下: <script type="text/javascript"> document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} </script> 注意这段代码必须放在

  • JS实现仿Windows7风格的网页右键菜单效果代码

    JS实现仿Windows7风格的网页右键菜单效果代码

    本文实例讲述了JS实现仿Windows7风格的网页右键菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS仿Windows7风格的网页右键菜单,可以多级展开的右键菜单,原生JS.可参考性强,学习JavaScript的朋友不可错过.本菜单用户体验极佳,兼容性良好,无jQuery. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win7-style-web-right-menu-codes/ 具体代码如下: <!DOCTYPE htm

  • 深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

    我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法. 由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制.右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScri

  • JavaScript 对任意元素,自定义右键菜单的实现方法

    JavaScript 对任意元素,自定义右键菜单的实现方法

    一.一些概念: 1.鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键. BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是"单击右键"事件,都返回2. 2.事件onmousedown:表示鼠标按键按下的动作. 事件oncontextmenu:点击鼠标触发的另一个事件. 3.中断默认事件处理函数的方法:IE中设置returnValue=false;  标准DOM中调用preventDefault()方法. 4.事件对象:①在IE中,事件对

  • javascript拖拽效果延伸学习

    本文总结一下,拖拽所延伸出来的一些效果,供大家参考,具体内容如下 1.实现拖拉图片时,带框的效果.即当鼠标拖动某一个图片或物体时,其原有位置扔保留其型. 这种效果,其实很简单,主要是另外创建一个物体,使其与被拖拽的物体,宽和高一样,然后,将其变为拖拽的对象. 直接上代码: <html <head> <style> #div1 {width:100px; height:100px; background:yellow; position:absolute;} .box{bord

  • JS组件Bootstrap ContextMenu右键菜单使用方法

    JS组件Bootstrap ContextMenu右键菜单使用方法

    今天来总结下bootstrap的一个小组件的应用.好了,不说废话,进入正题吧. 一.ContextMenu介绍 一个需求:表格行调序,支持多选调序,并且可以不连续多选.什么意思呢?先来看看需要实现的效果图: 需求是:需要将选中的6.8.9行移动到第2行和第3行之间.撇开业务不说,单纯从技术层面来说,要想使用最少操作达到上述效果,博主想到了右键功能,如果能够在第2行或者第3行上面点击鼠标右键,通过右键菜单功能将选中的行移动到相应的位置,这样是不是最简单呢.说做咱就做,于是找组件,搜索"bootst

  • ExtJs grid行 右键菜单的两种方法

    在这下边: 方法一 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridContextMenu.aspx.cs" Inherits="gridContextMenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

  • Android 中Popwindow弹出菜单的两种方法实例

    Android 中Popwindow弹出菜单的两种方法实例 1.popWindow就是对话框的一种方式! 此文讲解的android中对话框的一种使用方式,它叫popWindow. 2.popWindow的特性 Android的对话框有两种:PopupWindow和AlertDialog.它们的不同点在于: AlertDialog的位置固定,而PopupWindow的位置可以随意. AlertDialog是非阻塞线程的,而PopupWindow是阻塞线程的. PopupWindow的位置按照有无偏

  • c# TreeView添加右键快键菜单有两种方法

    一种就是使用TreeView的ContextMenuStrip属性,添加一个新ContextMenuStrip,这个方法非常的简答直接,缺点是右键菜单是整个控件响应的,也就是说即使没有右键选中节点也是会触发快捷菜单的显示 这种方法里获取哪一个的node选中是通过这个方法: 复制代码 代码如下: TreeNode curNode = this.trvFolder.GetNodeAt(e.X, e.Y) 另一种是创建ContextMenuStrip,并且使用TreeView的NodeMouseCli

  • sql动态行转列的两种方法

    第一种方法: 复制代码 代码如下: select *from ( select Url,case  when  Month=01 then  '1月' when  Month=02 then '2月' when  Month=03 then  '3月' when  Month=04 then '4月' when  Month=05 then  '5月' when  Month=06 then '6月' when  Month=07 then  '7月' when  Month=08 then '

  • C#访问命令行的两种方法

    本文实例讲述了C#访问命令行的两种方法.分享给大家供大家参考.具体如下: 方法1: // 参数:A B C using System; public class CommandLine { public static void Main(string[] args) { // Length 属性用于获取数组的长度. // 注意,Length 是只读属性: Console.WriteLine("Number of command line parameters = {0}", args.

  • c++连接mysql数据库的两种方法(ADO连接和mysql api连接)

    第一种方法可以实现我当前的需求,通过连接不同的字符串来连接不同的数据库.暂时只连接了mysql,sqlserver,oracle,access.对于access,因为它创建表的SQL语句不太兼容标准SQL语句,需要做一些处理,这里暂时不说.第二种方法只能针对于mysql数据库的连接,不过用这种方法不用安装MyODBC服务器程序. 不管用哪种方法,首先需要安装Mysql数据库,安装方法请看"mysql安装及一些注意点".最好安装一个Navicat for mysql,方便操作mysql数

  • MySql安装启动两种方法教程详解

    MySql安装启动两种方法教程详解

    mysql安装启动两种方法如下所示: 方法一(简单版): 1.cmd进入mysql安装的bin目录:mysqld.exe –install 2.net start mysql 服务启动(或者选择计算机->(右键)管理->服务和应用程序->服务->mysql右键启动服务) 3.mysql –uroot –p 回车 4.password留空 回车 方法二: 1.cmd进入到mysql安装目录bin,如:D:\MySQL Server 5.6\bin 2.mysqld --console

  • Jquery中ajax提交表单几种方法(get、post两种方法)

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

  • 详解eclipse将项目打包成jar文件的两种方法及问题解决方法

    第一种:利用eclipse中自带的export功能 第一种方法分两种情况先来看第一种情况:没有引用外部jar的项目打包 步骤一:右键点击项目选择导出(export),选择java>jar文件(不是选择可运行jar文件) 步骤二:选择你要导出的项目以及文件,指定文件导出路径.连续点击两个下一步后到第四步. 步骤三:选择主类. 按照以上步骤即可完成对一个不引用外部jar项目的打包. 第二种情况:没有引用外部jar的项目打包 当我们引用了外部jar后,使用eclipse自带的export打包略显繁琐.

  • C++连接mysql数据库的两种方法小结

    现在正做一个接口,通过不同的连接字符串操作不同的数据库.要用到mysql数据库,以前没用过这个数据库,用access和sql server比较多.通过网上的一些资料和自己的摸索,大致清楚了C++连接mysql的方法.可以通过2种方法实现. 第一种方法是利用ADO连接, 第二种方法是利用mysql自己的api函数进行连接. 第一种方法可以实现我当前的需求,通过连接不同的字符串来连接不同的数据库.暂时只连接了mysql,sqlserver,oracle,access.对于access,因为它创建表的

随机推荐