PDA

View Full Version : Where is EL Ref in ContextMenu SubItem?



Cliff
29 Apr 2011, 11:32 AM
We're using ExtJS v3.2.2.

I created a ContextMenu. It has 2 items, one is id="missionState", the other item is omitted from the following code block for brevity of this example. The problem is that the standard Browser-supplied context menu appears on top of my ContextMenu when my ContextMenu is right-clicked. I'm trying to block that appearance of the Browser-supplied context menu. I have succeeded in doing so on the two elements of this.contextMenu.items[] (i.e. missionState and the one unshown). The code that successfully does that is the afterrender
handler (its relevant parts are in the second code block below).


this.contextMenu = new Ext.menu.Menu({
id: 'MyMainContextMenu',
floating: true,
hidden: true,
items: [
{
id: 'missionState',
text: 'Set Mission State',
disabled: false,
hidden: false,
menu: {
items: [
{id: ('actionON'),
text: 'Enable',
handler: this.doStuff,
scope: this},
{id: ('actionOFF'),
text: 'Disable',
handler: this.doStuff,
scope: this}
]
},
listeners: {
afterrender: function(thisCmp){
debugLog('Enter afterrender handler for missionState.');
this._onAfterRenderContextMenu(thisCmp);
},
scope: this
}
},
// Second items[] element here, removed for brevity.
],
listeners: {
afterrender: function(thisCmp){
debugLog('Enter afterrender handler for ContextMenu.');
this._onAfterRenderContextMenu(thisCmp);
},
scope: this
}
});


The afterrender handler {i.e. _onAfterRenderContextMenu()} is below. It's main purpose is to call:
item.el.on('contextmenu', this._swallowContextMenu, this);
The _swallowContextMenu() call works. The problem is with the children of the two main menu items, the ones contained in cmp.menu.items (NOT cmp.items). These items never have a valid el member on which to call on().

Currently, the afterrender handler is called from each level (see above). Notice my attempt to use Ext.DomQuery.selectNode() to find a legit Ext.Element object on which to call on(). I had also tried calling this from the top level and then using a nested for loop to get the grandChildren. Neither worked. The el member of the grandChildren simply isn't available.

This can't be that tough. Any suggestions?


_onAfterRenderContextMenu: function(cmp){
var mixedColl;

if (this.contextMenu.getItemId()==cmp.getItemId()){
// This is the block for the two main menu items, this one always works.
mixedColl = cmp.items;
}
else{
// This is the block for the children of the two main menu items (i.e. grandChildren), this never works.
// In this case, I can' ever find a good reference on the item.el in the for loop below.
mixedColl = cmp.menu.items;
}
var cnt = mixedColl.getCount();

for (var i=0, item, el; i<cnt; i++){
item = mixedColl.itemAt(i);
el = item.el;
if (! el){
// This does not produce a valid reference for node. I presume the menuitem is in a DIV?
var node = Ext.DomQuery.selectNode('div[id="'+item.id+'"]', cmp.dom);
el = new Ext.Element(node);
}

if (el){
el.on('contextmenu', this._swallowContextMenu, this);
}
else{
debugLog('ERROR: In _onAfterRenderContextMenu() el is NOT defined for i='+i);
}
}
}

Cliff
3 May 2011, 9:49 AM
I moved this subject to the Premium Forum:
http://www.sencha.com/forum/showthread.php?132277-Finding-a-Valid-quot-el-quot-Reference-in-ContextMenu-s-Cascaded-Menuitems&p=597933#post597933