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


Posted in Javascript onJune 19, 2010

在这下边: 方法一

<%@ 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()); 
});
Javascript 相关文章推荐
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 #Javascript
javascript,jquery闭包概念分析
Jun 19 #Javascript
基于jquery的滚动新闻列表
Jun 19 #Javascript
基于Jquery的温度计动画效果
Jun 18 #Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 #Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 #Javascript
jquery ready()的几种实现方法小结
Jun 18 #Javascript
You might like
PHP4实际应用经验篇(3)
2006/10/09 PHP
用PHP生成静态HTML速度快类库
2007/03/18 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
js面向对象编程总结
2017/02/16 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
Python简单日志处理类分享
2015/02/14 Python
Python 的内置字符串方法小结
2016/03/15 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Django用户认证系统 User对象解析
2019/08/02 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
保研推荐信范文
2015/03/25 职场文书
盗窃案辩护词
2015/05/21 职场文书
初一年级组工作总结
2015/08/12 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python