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?
The easiest way is just set an id for your TabPanel and then:
Ext.getCmp('your_TabPanel_id').fireEvent("blogCountAvailable");