I have a toolbar named DasboardToolbar in which i have a splitbutton.
The problem when I click a menuitem in the splitbutton it fires a event which the controller's this.control method should catch but it doesn't. The object used for firing event is the object of the component still its responding to the fired event.
Any help appreciated.
The is the controller i'm using
Ext.define('MyApp.controller.MainController',
{
extend : 'Ext.app.Controller',
views : [ 'header.MSHeader', 'dashboard.toolbar.DashboardToolbar',
],
init : function() {
console.log("controller");
this.control({
'MSHeader' : {
tabChanged : this.tabChangeTracker
}
}, {
'dash.DashToolbar' : {
layoutSelected :this.layoutSelectedTracker, //errorstatment
}
});
},
layoutSelectedTracker:function(){
console.log('catched'); // code never reaches here
}
});
The Component
Ext.define('MyApp.view.dashboard.toolbar.DashboardToolbar', {
extend : 'Ext.panel.Panel',
alias : 'widget.dash.DashToolbar',
id : 'dashtoolbar',
initComponent : function() {
var me = this;
this.items = [ {
xtype : 'toolbar',
items : [ {
xtype : 'splitbutton',
width : '55',
text : 'layout',
autoScroll : true,
menu : new Ext.menu.Menu({
id : 'layoutmenu',
items : [
{
xtype : 'button',
text : 'First',
handler : function() {
me.fireEvent("layoutSelected", { //eventFired from here
layouts : 1
});
}
}]
})
} ]
} ],
this.callParent();
}
});