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

here screenshot visualize want do.

there tab iconless (between exit , project). blue highlighted line element in inspector.

my goal set tab's width in tabbar , not in tabpanel 5px. act has spacer between tabs' icons.

i tried manually add css class create specific rule pointing element , inside rule set width 5px !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 never found way add class @ particular level of component hierarchy.

so tried replace existing css class of component (.x-item-disabled). changed .x-item-disabled .fake , created css rule accordingly... did not work , has in first case, component's css classes in inspector did not changed @ all..

i'm pretty sure need way since it's not sencha allows do.

can me out plz?

ext.tab.bar , ext.tab.tab private classes , ext.tab.panel not seem expose feature, guess @ moment there no simple way ask. tabs built based on panel items configuration, data pass in not directly mapped them. indeed if apply cls or style property item configuration, goes content of panel, not associated tab. can modify tab after 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() {         // spacer position, it's ugly works         // without extending sencha components         var spacer = this.gettabbar().getat(1);         // of course here apply css class         // if prefer         spacer.setstyle('width:5px; min-width:5px;');         // let's disable button         spacer.setdisabled(true);         // , remove icon since mandatory in panel         // config don't want         spacer.seticon(false);     }  }); 

see fiddle.