PDA

View Full Version : [SOLVED] itemclick listener and catching click event from buttons in buttongroup



tatsu
13 Aug 2009, 7:44 AM
I use the itemclick listener from the Ext.Menu.menu class to catch the click events from the buttons. Always works fine using the default items.

I've created a menu with buttons in buttongroups as menuitems. In this case clicking on a button don't triggers the itemclick listener.

Is there a chance to create a buttongroup inside of a menu with a working itemclick listener in the Ext.menu?
I think I have to extend (or override) the Ext.menu.Menu, the Ext.menu.Baseitem, the Ext.Buttongroup and/or the Ext.Button Class.

What is the best way to do this?

Working Example code without Buttongroup:

...
menu: new Ext.menu.Menu({
listeners:{
itemclick: function() {console.log('Item clicked')}
},
itemId: 'menu1',
items: [{
text: 'menuitem1'
},{
text: 'menuitem2'
}]
...
})
Example code with Buttongroup:

...
menu: new Ext.menu.Menu({
listeners:{
// ! Itemclick listener isn't call on buttonclick !
itemclick: function() {console.log('Item clicked')}
},
itemId: 'menu2',
items: [{
xtype: 'buttongroup',
title: 'Buttongroup1',
width: 100,
columns: 2,
defaults: {
xtype: 'button',
scale: 'large',
width: '100%',
iconAlign: 'left'
},
items: [{
text: 'menuitem1'
},{
width: 'auto',
text: 'menuitem2'
},{
colspan: 2,
text: 'menuitem3',
scale: 'small',
}]
}]
})
The 2nd example don't work.


Thanks in advance.

tatsu
14 Aug 2009, 3:55 PM
I've searched for solutions in Google and in the Forum, but without success.
Is using the itemclick listener the wrong way to realize a central routine to control the menu interaction?
I would appreciate it if you could give me a tip how it could work. ;)

Thanks in advance

Animal
15 Aug 2009, 6:02 AM
So what you need is to be able to fire events through a higher Component in the hierarchy?

How about



Ext.ux.EventRelayer = Ext.extend(Object, {
constructor: function(relayer, evts) {
this.relayer = relayer;
this.evts = Array.prototype.slice.call(arguments, 1);
},

init: function(c) {
c.on('render', this.onClientRender, this, {single: true});
},

onClientRender: function(c){
var p = (this.relayer instanceof Ext.util.Observable) ? this.relayer :
Ext.isString(this.relayer) ? (Ext.getCmp(this.relayer) || c.findParentByType(this.relayer)) : c.findParentBy(this.relayer);
if (p) {
p.relayEvents(c, this.evts);
}
}
});


then



menu: new Ext.menu.Menu({
listeners:{
// ! Itemclick listener isn't call on buttonclick !
click: function() {console.log('Item clicked')}
},
itemId: 'menu2',
items: [{
xtype: 'buttongroup',
title: 'Buttongroup1',
width: 100,
columns: 2,
defaults: {
xtype: 'button',
scale: 'large',
width: '100%',
iconAlign: 'left',
plugins: new Ext.ux.EventRelayer('menu', 'click') // relayer is parent of type 'menu'
},
items: [{
text: 'menuitem1'
},{
width: 'auto',
text: 'menuitem2'
},{
colspan: 2,
text: 'menuitem3',
scale: 'small',
}]
}]
})

tatsu
22 Aug 2009, 2:04 AM
Hi Animal,
your Idea to fire the events through a higher Component in the hierarchy solved my problem.


Thank you very much for your support.

Have a nice weekend :-)