View Full Version : Ext.tab.Bar, changing UI

26 Oct 2012, 12:18 AM

I am trying to change the UI of the TabBar depending on the Tab selected, so here is the code :

listeners: {
tabchange: {
fn: function (tabPanel, newCard, oldCard, options) {
if (newCard.tabConfig) {
} else {
scope: me

When I select a Tab having "alertes" as UI, here is the resulting HTML :

<div class="x-tab-bar x-docked x-unselectable x-tab-bar-alertes x-top x-tab-bar-top x-tab-bar-alertes-top x-horizontal x-tab-bar-horizontal x-tab-bar-alertes-horizontal x-docked-top x-tab-bar-docked-top x-tab-bar-alertes-docked-top" style="border-width: 1px; width: 1894px; left: 0px; top: 0px; " id="tabbar-1034">
<div id="tabbar-1034-body" class="x-tab-bar-body x-tab-bar-body-top x-tab-bar-body-default-top x-tab-bar-body-horizontal x-tab-bar-body-default-horizontal x-tab-bar-body-default-top x-tab-bar-body-default-horizontal x-tab-bar-body-default-docked-top x-box-layout-ct x-tab-bar-body-default" style="width: 1894px; ">
[... the tabs ...]
<div id="tabbar-1034-strip" class="x-tab-bar-strip x-tab-bar-strip-default x-tab-bar-strip-default-top x-tab-bar-strip-default-horizontal x-tab-bar-strip-default-docked-top" style="width: 1894px; ">

The UI is applied to the main div, but the body and the strip inner divs keep default as UI, am I missing something ?

29 Oct 2012, 2:12 AM
Finally, I am using this CSS workaround :

.x-tab-bar-alertes .x-tab-bar-strip {
background-color: #E0383A;

But I do not feel it is really clean.
It is strange that the child DIVs are not updated with the good UI class...