I have a Tab Panel with 5 tabs. For this panel I have a custom css style on the middle tab making it look different from the other 4 tabs (a common practice in iOS design). This has all worked well but recently I've realized if I destroy that panel and recreate it my current css targeting is not specific enough.
So my goal is to give that specific tab a css class or ID so I better target it ensuring that the style is applied each time regardless of how the tabpanel is instantiated or how many tabs it has.
Anyone know how to do this? Currently I have this
Code:
Ext.define("STMobile.view.Home", {
extend: 'Ext.tab.Panel',
xtype: 'home',
requires: [
'Ext.TitleBar',
'Ext.TabBar',
'STMobile.view.Cases.Index',
'STMobile.view.Requests.Index',
'STMobile.view.Add.Index',
'STMobile.view.Toolsets.Index',
'STMobile.view.More.Index',
'Ext.Img'
],
config: {
id: 'Home',
tabBarPosition: 'bottom',
layout: {
animation: null
},
activeItem: 0,
items: [
{
xtype: 'casesindex'
},
{
xtype: 'requestsindex'
},
{
xtype: 'addindex',
cls: 'specialTab',
},
{
xtype: 'toolsetsindex'
},
{
xtype : 'moreindex'
}
]
}
});
However this just adds the class of "specialTab" to the actual panel that this tab activates. Not the tab itself.