Sure. It took me a bit of digging to get everything working correctly initially. In the end this turned out to be very stable and allow me to use the MVC pattern to render panels to my Viewport as needed. This code is a snippet from my application Viewport in the dockedItems: [ ] array. Let me know if you want to see the whole panel:
Code:
{
xtype: 'tabbar',
dock: 'bottom',
ui: 'dark',
layout: {
pack: 'center'
},
items: [
{
id: 'home-tab',
xtype: 'tab',
iconCls: 'icon-home',
text: 'Home',
handler: function(){
if(!this.getEl().hasCls('x-tab-active')){
Ext.dispatch({
controller: 'Viewport',
action: 'renderHomeMenu'
});
}
}
},
{
id: 'suppliers-tab',
xtype: 'tab',
iconCls: 'icon-suppliers',
text: 'Suppliers',
hidden: HIDE_SUPPLIERS_BTN == true ? true : false, // this is set in the config.js file. removed when app is branded for a specific supplier
handler: function(){
if(!this.getEl().hasCls('x-tab-active')){
Ext.dispatch({
controller: 'Viewport',
action: 'renderSuppliers'
});
}
}
},
{
id: 'favorites-tab',
xtype: 'tab',
iconCls: 'icon-favorites',
text: 'Favorites',
handler: function(){
if(!this.getEl().hasCls('x-tab-active')){
Ext.dispatch({
controller: 'Viewport',
action: 'renderFavorites'
});
}
}
},
{
id: 'contact-tab',
xtype: 'tab',
iconCls: 'user',
text: 'Contact',
handler: function(){
if(!this.getEl().hasCls('x-tab-active')){
Ext.dispatch({
controller: 'Viewport',
action: 'renderContact'
});
}
}
}
]
}
The tab's active class ('x-tab-active') is being in the "render" event of the matching panel. I typically don't like to reference components by id, but in this situation it was the simplest solution. For example if you were to tap on my the "Favorites" tab, I have this in the "Favorites Panel":
Code:
listeners: {
render: function(){
Ext.getCmp('favorites-tab').getEl().addCls('x-tab-active');
}
}
Hoe this helps.
Alexander Rolek