PDA

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



redosk
26 Oct 2012, 12:18 AM
Hello,

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) {
tabPanel.setUI(newCard.tabConfig.ui);
tabPanel.getTabBar().setUI(newCard.tabConfig.ui);
} else {
tabPanel.setUI('default');
tabPanel.getTabBar().setUI('default');
}
},
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>
<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; ">
</div>
</div>

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

redosk
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...