Add a CSS class to the TAB in TabBar, not the tab it self

Question

Here is a screenshot to visualize what I want to do.

There is an extra tab which is iconless (between exit and project). The blue highlighted line is the element itself in the inspector.

My goal is to set the tab's width in the tabbar and not in the tabpanel to 5px. So That it would act has a spacer between tabs' icons.

I tried to manually add a CSS class so that I could create a very specific rule pointing to that element and inside this rule set the width to 5px with an !important tag.

.x-tab .x-tab-normal .x-item-disabled .x-iconalign-center .x-tab-icon .x-layout-box-item .x-stretched
{
  width:5px !important;
}

Sadly I never found a way to add a class at that particular level of the component hierarchy.

So I tried to replace an existing CSS class of that component (.x-item-disabled). I changed .x-item-disabled to .fake and than created a CSS rule accordingly... It did not work and has in the first case, the component's css classes in the inspector did not changed at all..

I'm pretty sure I need to do it that way since it's not something sencha allows us to do.

Can someone help me out plz?

Answer 1

Ext.tab.Bar and Ext.tab.Tab are private classes and Ext.tab.Panel does not seem to expose that feature, so I guess at the moment there is no simple way to do what you ask. Those tabs are built based on the Panel items configuration, but the data you pass in are not directly mapped to them. Indeed if you apply a cls or style property to an item configuration, that goes to the content of the panel, not to its associated tab. You can however modify the tab after your panel has been initialized:

Try this:

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: '',
            iconCls: 'dummy',
            html: ''
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ],

    initialize: function() {
        // get spacer by position, it's ugly but it works
        // without extending Sencha components
        var spacer = this.getTabBar().getAt(1);
        // of course here you could apply a CSS class
        // if you prefer
        spacer.setStyle('width:5px; min-width:5px;');
        // let's also disable the button
        spacer.setDisabled(true);
        // and remove the icon since it is mandatory in Panel
        // config but we don't really want it
        spacer.setIcon(false);
    }

});

See the fiddle.