CODEWITHSUNDEEP
javascriptextjs
shredding
shredding

Reputation: 5591

Ext JS Event not firing

I have an app and everything is rendered fine. However, I can't catch the mainTabChanged Event and do not no why. I did everything like in the example, console logs FIRED, but never RECEIVED.

Why?

Ext.define('MyApp.controller.Tab', {
    extend:'Ext.app.Controller',

    init:function () {
        var me = this;
        me.mainWindow = me.getView('tab.List').create();

        me.control({
            'mainTab': {
                mainTabChanged: me.onMainTabChanged
            }
        });

    },

    me.onMainTabChanged: function(oldTab, newTab, settings) {
        console.log("received");
        console.log(settings);
    }
});


Ext.define('MyApp.view.tab.List', {

    extend:'Ext.form.FieldSet',

    alias:'widget.mainTab',

    initComponent:function () {
        var me = this;

        me.title = 'App'
        me.items = me.createElements();

        me.addEvents(
            'mainTabChanged'
        );

        me.callParent(arguments);

    },


    createElements: function () {
        var me = this, tabs = [];

        tabs = [{
            title: 'Tab 1',
                bodyPadding: 10,
            html : 'A simple tab'
        },
        {
            title: 'Tab 2',
                html : 'Another one'
        }];

        var tabPanel = Ext.create('Ext.tab.Panel', {
            height: 150,
            activeTab: 0,
            plain: true,
            items : tabs,
            listeners: {
                beforetabchange: function(panel, newTab, oldTab) {
                    console.log("FIRED");
                    me.fireEvent('mainTabChanged', oldTab, newTab, 'Test');
                }
            }
        });

        return tabPanel;
    }
});

Upvotes: 1

Views: 1470

Answers (2)

shredding
shredding

Reputation: 5591

My problem was, that I was trying to injecting one app into another. I have now solved the problem by not injecting the app, but by injecting the controller and views directly into the app and hence make them a native part of the app, so they will not bypass the event bus.

Upvotes: 0

harry
harry

Reputation: 702

I think the problem is that your widget "mainTab" is a 'List', but you are firing the event from a 'tabpanel'.

In the controller try this:

        me.control({
        'mainTab > tabpanel': {
            mainTabChanged: me.onMainTabChanged
        }

or just

        me.control({
        'tabpanel': {
            mainTabChanged: me.onMainTabChanged
        }

Upvotes: 1

Related Questions