PDA

View Full Version : Mouse click does not work on menu items(when menu is rendered as context menu)



anilcs0405
3 Aug 2009, 4:31 AM
I have struggled a bit to put context menu to my panel, and now i am facing an issue of mouse click not working on this menu items. The menu shows up. Key board navigation and 'ENTER' work perfect in the menu after it is shown. But mouse click does not work.Here is the code:




Ext.onReady(function() {
createContextPanel("netSet", "Network Settings");

/* function that constructs the panel which will have the custom context menu */
function createContextPanel(id, title){
var icon = new Ext.Panel({
id: id+"_ctx",
title: "Panel with Custom Context Menu",
width: 300,
height: 300,
border:false,
frame: false,
style: 'margin-left: 100px; margin-top: 100px;',
renderTo: 'iconPanel',
listeners:{
render: function(cmp){
cmp.el.on('contextmenu', function(evt, div) {
var x = evt.browserEvent.clientX;
var y = evt.browserEvent.clientY;
evt.stopEvent();
createCtxMenu(cmp.id, x, y);
});
}
}
});
}

/* function that constructs and shows the menu */
function createCtxMenu(id, x, y){
var menu = new Ext.menu.Menu({
items: [{
text : 'Open',
handler : function(){ alert("Open Clicked");}
},{
text : 'Delete',
handler : function(){ alert("Delete Clicked");}
}]
});
menu.showAt([x,y]);
}
});


From firebug inspect what i find is the userlying menu item anchor element has 'unselectable' and 'hidefocus' attributes set to 'on' and 'true' respectively.

Please let me know my mistake if any, Thanks in advance.

Animal
3 Aug 2009, 4:33 AM
You quite sure you need to create a brand new menu every time they right click?!

anilcs0405
3 Aug 2009, 5:50 AM
Thanks Animal, But I had that check and I removed it for sake of keeping the code short in query, any ways it should work for the first time, but it does not work even if that check is there

anilcs0405
3 Aug 2009, 5:54 AM
Here is the code with your correction


Ext.onReady(function() {
var menu;
createContextPanel("netSet", "Network Settings");
/* function that constructs the panel which will have the custom context menu */
function createContextPanel(id, title){
var icon = new Ext.Panel({
id: id+"_ctx",
title: "Panel with Custom Context Menu",
width: 300,
height: 300,
border:false,
frame: true,
style: 'margin-left: 100px; margin-top: 100px;',
renderTo: 'iconPanel',
listeners:{
render: function(cmp){
cmp.el.on('contextmenu', function(evt, div) {
var x = evt.browserEvent.clientX;
var y = evt.browserEvent.clientY;
evt.stopEvent();
if(null != menu){
menu.showAt([x,y]);
}
else{
createCtxMenu(cmp.id, x, y);
}
});
}
}
});
}

/* function that constructs and shows the menu */
function createCtxMenu(id, x, y){
menu = new Ext.menu.Menu({
items: [{
text : 'Open',
handler : function(){ alert("Open Clicked");}
},{
text : 'Delete',
handler : function(){ alert("Delete Clicked");}
}]
});
menu.showAt([x,y]);
return;
}
});

Please help on this

Animal
3 Aug 2009, 5:55 AM
I just pasted this into Firebug, ran it, and the context menu(s) worked fine, and alerted what I clicked:



Ext.getBody().update('');
var icon = new Ext.Panel({
title: "Panel with Custom Context Menu",
width: 300,
height: 300,
border:false,
frame: false,
style: 'margin-left: 100px; margin-top: 100px;',
renderTo: document.body,
listeners:{
render: function(cmp){
cmp.el.on('contextmenu', function(evt, div) {
var x = evt.browserEvent.clientX;
var y = evt.browserEvent.clientY;
evt.stopEvent();
createCtxMenu(cmp.id, x, y);
});
}
}
});

/* function that constructs and shows the menu */
function createCtxMenu(id, x, y){
var menu = new Ext.menu.Menu({
items: [{
text : 'Open',
handler : function(){ alert("Open Clicked");}
},{
text : 'Delete',
handler : function(){ alert("Delete Clicked");}
}]
});
menu.showAt([x,y]);
}