PDA

View Full Version : Add context menu to Viewport only?



ricky.hartmann
8 May 2014, 8:17 AM
Hey all,

I have a viewport which contains multiple windows, and a custom context menu. Everything works correctly, but currently the custom context menu appears when you right click on the windows as well as the viewport. I'd like to have the browser's normal context menu appear when a user right clicks in one of the windows. Is there a way to accomplish this?

Thanks

jsakalos
8 May 2014, 9:44 AM
The listener has to check the right-click target and process it only if target is the viewport.

ricky.hartmann
8 May 2014, 11:17 AM
That makes sense, but I'm having trouble making it work. The easiest way to explain where I am is probably with a sample:




Ext.define('MyViewport', {
// ......
// blah
// ......
afterRender: function () {
var me = this;
me.el.on('contextmenu', function(e, el) {
console.log(e); // This is the event object
console.log(el); // This is the html object of the clicked element
});
}}


The issue I'm seeing is that e.target is always the same thing regardless of what was actually clicked. (It's always a dynamically generated div which is inside the viewport.) So I seemingly can't use that to identify the target.

Now el on the other hand, does accurately represent the clicked element, but when the target is the viewport el is that same dynamically generated div. I don't see a way to attach a hard coded id or unique class to it, so I'm kind of stuck.

I'm assuming I'm missing something?

damo
8 May 2014, 12:02 PM
me is your viewport.

ricky.hartmann
8 May 2014, 12:15 PM
me is your viewport.

Correct. I don't see how that helps me identify the target though.

jsakalos
8 May 2014, 12:54 PM
Try this:


afterRender: function () {
var me = this;
me.callParent(arguments);
me.getEl().on('contextmenu', function(e, el) {
console.log(e.getTarget() === me.getLayout().innerCt.dom);
});
}

ricky.hartmann
8 May 2014, 1:48 PM
Try this:


afterRender: function () {
var me = this;
me.callParent(arguments);
me.getEl().on('contextmenu', function(e, el) {
console.log(e.getTarget() === me.getLayout().innerCt.dom);
});
}


Hmm.. getLayout() works, however innerCt is undefined.

jsakalos
8 May 2014, 2:22 PM
Do you call me.callParent(arguments) before the test?

If it still fails, execute it in afterlayout listener with ?single:true

jsakalos
8 May 2014, 2:26 PM
One more note: innerCt is only used by some layouts; what is your Viewport layout?

damo
8 May 2014, 3:15 PM
Hacky but works.


'afterrender': function () { var me = this;
me.getEl().on('contextmenu', function (e, el, opts) {
if (el.id === me.id + '-innerCt') {
console.log('viewport')
}
})
}

jsakalos
8 May 2014, 3:18 PM
What's the layout of the Viewport? I've tested Ext 4.2.2, viewport with no layout with as you say you have some windows inside.

ricky.hartmann
9 May 2014, 6:05 AM
It's working now. I realized this morning that inside the viewport, there's a panel with layout: fit. The suggestion from jsakalos works with one minor adjustment:

console.log(e.getTarget() === me.down('panel').getLayout().innerCt.dom);

This is what I get for jumping in and modifying someone else's code without fully reading everything first. Thanks for all the help.