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 相关文章推荐
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
javascript关于继承解析
May 10 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 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
Zend公司全球首推PHP认证
2006/10/09 PHP
Smarty变量用法详解
2016/05/11 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
javascript this用法小结
2008/12/19 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
javascript实现拖放效果
2015/12/16 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
学习Vue组件实例
2018/04/28 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
flask session组件的使用示例
2018/12/25 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
浅谈python 类方法/静态方法
2020/09/18 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
信用社员工先进事迹材料
2014/02/04 职场文书
人事专员的岗位职责
2014/03/01 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
Python预测分词的实现
2021/06/18 Python
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
nginx常用配置conf的示例代码详解
2022/03/21 Servers