PDA

View Full Version : Ext. 4 menu event



xun
9 Mar 2012, 10:09 AM
hi,

I have a menu question:

A dummy custom menu is defined as such. Inside the menu, the click event is captured and fired.


Ext.define("Ext.csx.LeftMenu", {
extend: "Ext.menu.Menu",
alias: 'widget.leftmenu',
minHeight: 200,
width: 300,


listeners: {
'click': function (menu, item) {
console.log(item.text);
this.fireEvent('navclick', this, item.text);
}
},




initComponent: function () {
var me = this;
me.items = [{
text:"test 1"
},
{
text: "test 2"
}];
me.callParent(arguments);
this.addEvents('navclick');


},


});


Then in a separate panel, I try to catch the menu click event. It fails every single time. Why?




Ext.onReady(function () {


Ext.create('Ext.panel.Panel', {
margin: '0 0 10 0',
floating: false, // usually you want this set to True (default)
renderTo: Ext.getBody(),


items: [
{
xtype: 'leftmenu',
id: 'app-navtree',
listeners: {


'navclick': function () {
console.log('caught you');
}
}
}


]


});


});

mitchellsimoens
9 Mar 2012, 11:32 AM
The listeners from when you create the instance is removing the listeners when you used Ext.define. I have a blog post about this particular thing: http://mitchellsimoens.com/2011/12/ext-js-4/ext-define-and-listeners-as-a-property-bad/

xun
9 Mar 2012, 11:45 AM
Thank you, the answer is awesome