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 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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
解析php中的escape函数
2013/06/29 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
PHP7新功能总结
2019/04/14 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
浅析JavaScript动画
2015/06/10 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
Ibatis如何调用存储过程
2015/05/15 面试题
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
学习心得体会
2014/01/01 职场文书
社团活动策划书范文
2014/01/09 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
房产协议书范本2014
2014/09/30 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers