PDA

View Full Version : Ext.ux.menu.Menu



mschwartz
20 Nov 2009, 8:10 AM
It really bothered me that you can right click on a menu and it brings up the browser's context menu. Rather than override the behavior of Ext.menu.Menu, I decided that I don't want to bother having to track changes to the underlying Ext.menu.Menu functions whenever there's a new release, and that a proper extension is the way to go.

So here's a freebie (no restrictions on use) implementation of Ext.ux.menu.Menu. Use it instead of Ext.menu.Menu everywhere in your code, and you get 3 benefits:
1) Browser context menu is disabled on your menus
2) If you have Managed IFrame extension installed, it is detected and its shims enabled on menu show and shims disabled on menu hide. This allows the user to click on the iframe (shim) to make the menu go away as you want/expect.
3) Menu is immediately hidden on menu item selection - this in most cases will make the menu disappear while you are doing other rendering upon the menu item selection.



// Ext.ux.menu.Menu.js

Ext.namespace('Ext.ux.menu');

Ext.ux.menu.Menu = Ext.extend(Ext.menu.Menu, {
initComponent: function() {
Ext.ux.menu.Menu.superclass.initComponent.apply(this, arguments);
if (Ext.ux.ManagedIframe) {
this.on('beforeshow', function() {
Ext.ux.ManagedIFrame.Manager.showShims();
}, Ext.ux.ManagedIFrame.Manager);
this.on('beforehide', function() {
Ext.ux.ManagedIFrame.Manager.hideShims();
return true;
}, Ext.ux.ManagedIFrame.Manager);
}
this.on('itemclick', function() {
this.hide();
});
},
onRender: function(ct, position) {
Ext.ux.menu.Menu.superclass.onRender.call(this, ct, position);
this.getEl().on('contextmenu', function(e) {
e.stopEvent();
return false;
});
}
});
Ext.reg('ux-menu', Ext.ux.menu.Menu);

Animal
22 Nov 2009, 12:48 PM
Why not just put



Ext.getBody().on('contextmenu', Ext.emptyFn, null, {stopEvent: true});


at the top of your app if you do not like the browser's context menu? Why do you choose to only disable it on <DIV> elements which look a bit like the browser's context menu (Ext.Menus) If you don't like the browser's context menu, just disable it.

mschwartz
23 Nov 2009, 6:37 AM
Why not just put



Ext.getBody().on('contextmenu', Ext.emptyFn, null, {stopEvent: true});


at the top of your app if you do not like the browser's context menu? Why do you choose to only disable it on <DIV> elements which look a bit like the browser's context menu (Ext.Menus) If you don't like the browser's context menu, just disable it.

That's good for disabling the menu everywhere.

The extension I provided here does it just for menus and also detects and provides the Managed IFRAME shims so you can click on an iframe and the menu goes away.

The issue for Ext.menu.Menu is that you get TWO context menus (one the browser's) at the same time if you double right click on something with an Ext context menu.

Animal
23 Nov 2009, 8:40 AM
Why is it an issue?

Why do you just not like the browser's context menu in just that one situation? There's no logical difference.

mschwartz
23 Nov 2009, 9:08 AM
I have customers complain about the browser context menu on top of the Ext context menu.

They don't complain about the browser context menu in other cases, like where I have links and they're allowed to "open in new tab"

markeza
30 Nov 2009, 2:50 AM
Browser's context menu appears if I click right button twice.

This works: https://yui-ext.com/forum/showthread.php?t=83921