Assign a class to a specific Tab Panel's Tab

[jonathansimmons]

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

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.

[master_obiwan]

{
      xtype: 'casesindex',
      iconCls:'your_class_name'
}

[jonathansimmons]

This does not achieve my goal. This simply sets the value for the icon that will display. I am looking to add a unique selector to the tab itself.

[jonathansimmons]

This has to be possible. Sencha is creating the tab. There has got to be a way to give it a class or specific id. Anyone?

[mitchellsimoens]

Each item should be able to accept a tab config...

new Ext.tab.Panel({
    items : [
        {
            title : 'foo',
            tab   : {
                cls : 'blam'
            }
        }
    ]
});

[anilvardhan.p]

It's helped me.

[MarcoScherer]

Yeah, exactly what I was looking for! Didn't find that tab attribute in the docs. Thanks!