PDA

View Full Version : Handler not called for a menu item.



scaddenp
14 Feb 2011, 2:30 PM
I am creating menu from a JSON using this code...


function loadNodes(save,menu){
for (var i =0; i < save.childNodes.length; i++){
var tbi = new Ext.menu.Item({text:save.childNodes[i].name});
tbi.handler = clickHandler;
menu.add(tbi);
}
}
However, clickHandler isnt called when I click on the item (looking at firebug).
If I change the item type from Ext.menu.Item to Ext.Button, then the code works fine -except of course that the menu look and behave badly.

What gives?

scaddenp
14 Feb 2011, 5:08 PM
Further to the above, working again with firebug, menu onClick is not fired at all.

If I construct the menu conventionally, eg


toolbar.add({
text: 'Test menu',
menu: {
xtype: 'menu',
plain: true,
items: [{
text: 'item1',
handler: loadHTMLclick
},{
text: 'item2',
handler: loadHTMLclick
}]
}});

then the handler is fired.

scaddenp
14 Feb 2011, 5:36 PM
Yet, more. I laboriously compared properties of the menus in firebug between a manually created one and the code created one. The only difference (apart from names) I could find was that the non-working, code-created version has the menu component with a property "deferLayOut: true". deferLayout property doesnt exist in the hand-created version.

scaddenp
14 Feb 2011, 5:58 PM
Actually, on close examination, I found another more telling difference.

Looking at the actual item which has the click handler associated it, I note that in both they have handler:clickHandler in the methods, BUT I look at the events array, I find that in the working one,
click is an object

click
Object { name="click", obj={...}, listeners=}
listeners
[Object { scope={...}, options={...}}]
name
"click"
obj
Object { initialConfig={...}, text="b1", more...}
addListener
function()
clearListeners
function()
createListener
function()
findListener
function()
fire
function()
isListening
function()
removeListener
function()
__proto__
Object {}
deactivate
true
destroy
true
disable
true
enable
true
hide
true
removed
true
render
true
show
true
staterestore
true
statesave
true
Whereas in the non-working, code-created version, it simply has click:true.

What on earth needs to be added to code to make this work?

scaddenp
15 Feb 2011, 7:41 PM
Okay, found the problem. "handler" has to be in the constructor configuration, it isnt a property. Oddly it works for Button though docs dont have handler as a property there either. Anyway, once built into the config options, handler works fine.