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及原生js获取select下拉框选中的值示例
Oct 25 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
JavaScript实现tab栏切换效果
Mar 16 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
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
actionscript与javascript的区别
2011/05/25 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
python解包用法详解
2021/02/17 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
初中科学教学反思
2014/01/21 职场文书
2014年清明节寄语
2014/04/03 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2014年团队工作总结
2014/11/24 职场文书
初一英语教学反思
2016/02/15 职场文书
党员公开承诺书2016
2016/03/24 职场文书