提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

ExtJsgrid行右键菜单的两种方法

方法 两种 菜单 右键 ExtJsgrid
2023-06-13 09:14:23 时间
在这下边:方法一
复制代码代码如下:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="gridContextMenu.aspx.cs"Inherits="gridContextMenu"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="</FONT>http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>
<linkrel="Stylesheet"type="text/css"href="ExtJS/resources/css/ext-all.css"/>
<linkrel="Stylesheet"type="text/css"href="ExtJS/resources/css/xtheme-green.css"/>
<scripttype="text/javascript"src="ExtJS/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="ExtJS/ext-all.js"></script>
<scripttype="text/javascript"src="ExtJS/ext-lang-zh_CN.js"></script>
<styletype="text/css">
.panel_icon11{background-image:url(images/first.gif)}
.center_icon{background-image:url(images/center.png)}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<scripttype="text/javascript">
functionready()
{
varurl="jsonGrid.aspx?Param=select";
varsm=newExt.grid.CheckboxSelectionModel();
varcm=newExt.grid.ColumnModel
([
sm,newExt.grid.RowNumberer({header:"编号",width:50}),
{header:"编号",dataIndex:"ID",width:10,hidden:true},
{header:"标题",dataIndex:"TypeCName",width:100,editor:newExt.form.TextField()},
{header:"英文名称",dataIndex:"TypeEName",width:100,editor:newExt.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;
varfields=
[
{name:"ID"},
{name:"TypeCName"},
{name:"TypeEName"},
{name:"DelFlag"},
{name:"AddDate"}
];
varstore=newExt.data.Store
({
proxy:newExt.data.HttpProxy({url:url}),
reader:newExt.data.JsonReader({totalProperty:"totalPorperty",root:"root",fields:fields})
});
store.load({params:{start:0,limit:12}});
varpagingBar=newExt.PagingToolbar
({
displayInfo:true,
emptyMsg:"没有数据显示",
displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
store:store,
pageSize:12
});
vargrid=newExt.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:"<imgstyle="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;}
vartreeMenu=newExt.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>
<scripttype="text/javascript">
Ext.onReady(ready);
</script>
</div>
</form>
</body>
</html>

给Extjsgrid加入右键菜单方法二。
复制代码代码如下:

grid.on("rowcontextmenu",function(grid,rowIndex,e){
e.preventDefault();
if(rowIndex<0){return;}
vartreeMenu=newExt.menu.Menu
([
{
xtype:"",
text:"详细",
iconCls:"context-dog",
pressed:false,
handler:function(){
//获得行数据
varrecord=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(){
//获得行数据
varrecord=grid.getStore().getAt(rowIndex);
alert(record.data.company);
}
}
]);
treeMenu.showAt(e.getXY());
});

相关文章