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之undefined篇(上)
Nov 22 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 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中的Class的几点个人看法
2006/10/09 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python字符串处理函数简明总结
2015/04/13 Python
Python变量和数据类型详解
2017/02/15 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
Python如何实现爬取B站视频
2020/05/20 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
《走一步再走一步》教学反思
2014/02/15 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang