javascriptdom-eventssencha-touch-2

SenchaTouch2 - Listening to store load event, set tab panel item "badgeText"


I'am trying to build my first little Sencha Touch 2 app. I've created some stuff that is working as expected and now I could like to create some event handling stuff.

I've created the following store:

Ext.define('Mobile.store.Blogs', {
    extend: 'Ext.data.Store',

    config: {
    },
    listeners: {
        'load' :  function(store,records,options) {
            store.loaded = true;
            console.log("fired blogCountAvailable");
            store.fireEvent("blogCountAvailable");
        },
        'blogCountAvailable': function(store, records, options) {
            console.log("blogCountAvailable has been fired");
        }
    }
});

This stuff works as expected, but now comes the next step.

Here is the code of my tab panel bar:

    Ext.create("Ext.tab.Panel", {
        xtype:'mainTabPanelBottom',
        tabBarPosition: 'bottom',
        fullscreen: true,
    items: [
            {
                title: 'Blog',
                iconCls: 'home',
                xtype:'mainpanel'
            },
            {
                title: 'Users',
                iconCls: 'user',
                xtype:'userpanel'
            }
    ],
        listeners: {
            blogCountAvailable: function(tabpanel, newTab) {
                var tab   = newTab.tab,
                            badge = 10;

                tab.setBadge(badge);

                console.log("blogCountAvailable has been fired");
            }
        }
    });

My question now is how I could achieve it to "fire" my custom event blogCountAvailable to the tab panel?


Solution

  • The easiest way is just set an id for your TabPanel and then:

    Ext.getCmp('your_TabPanel_id').fireEvent("blogCountAvailable");