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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
document.open() 与 document.write()的区别
Aug 13 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
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获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
php实现微信支付之退款功能
2018/05/30 PHP
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
vue实现分页栏效果
2019/06/28 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
Linux文件系统类型
2012/02/15 面试题
酒店节能降耗方案
2014/05/08 职场文书
自查自纠整改报告
2014/11/06 职场文书
给校长的建议书范文
2015/09/14 职场文书
Python中request的基本使用解决乱码问题
2022/04/12 Python