Question

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();
    }

});
Was it helpful?

Solution

Have you tried using the id of the component?

this.control({
    'MSHeader': {
        tabChanged: this.tabChangeTracker
    },
    '#dashtoolbar': {
        layoutSelected: this.layoutSelectedTracker
    }
});

this.control uses Ext.ComponentQuery, have a look at the documentation there.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top