Ext3 学习(7) -- Panel contextmenu

最新推荐文章于 2025-10-20 16:55:29 发布

原创最新推荐文章于 2025-10-20 16:55:29 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#contextmenu

Ext3 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在ExtJS框架中为普通的Panel组件添加自定义的右键菜单功能，通过监听DOM事件并在指定位置显示菜单项。

有时候需要给普通面板Panel添加个右键菜单，但 [ for a panel does not have 'contextmenu' event, need to use the DOM event on the Panel's body Element ], 示例：

// 定义一个有右键菜单的Panel
var panelwithCtxMenu = new Ext.Panel({
	renderTo: Ext.getBody(),
	title: "demo of panel",
	width: 500, 
	height: 200,
	html: "to show a contextmenu....."
});
// 添加右键菜单				
panelwithCtxMenu.getEl().dom.oncontextmenu = function(evtObj){
	// 有些浏览器不支持参数evtObj, 可以使用window.event来获取右键事件
	var evt = (evtObj == null ? window.event : evtObj);
	// 屏蔽浏览器默认的右键菜单
	evt.preventDefault();
	//定义要显示的菜单
	var menu = new Ext.menu.Menu({
		items: [
			{
				text: "Menu one",
				handler: function(){
					alert("hello");
				}
			}
		]
	});
	// 右键菜单的显示位置 -- 用 clientX, clientY
	menu.showAt([evt.clientX, evt.clientY]);
}