Hiding TabPanel Header

[Joshua093]

I have an application where I am wanting to utilize the TabPanel widget. My problem is this: If I have only one tab, I want the header of the TabPanel to be hidden, as there is no need to show the header if only one tab is available.

I am using the advanced tabs example found here-> http://www.sencha.com/examples/#advancedtabs

I (http://www.sencha.com/examples/#advancedtabs) believe that there should be a simple solution to this, but I cannot find it anywhere.

I have tried adding a style name based on the number of TabItems, but my CSS doesn't seem to be working correctly.

Here's my logic for adding and removing the style name:
if(numberOfTabs == 1){
addStyleName("hidden-tab-bar");
}else{
removeStyleName("hidden-tab-bar");
}

and my associated CSS:
.hidden-tab-bar .x-tab-panel .x-tab-panel-header {
display: none;
}
.hidden-tab-bar .x-tab-panel .x-tab-panel-body {
border-top: 1px solid #D0D0D0; /* restore the top border using the same color as the panel */
}

Am I missing something or just approaching the problem incorrectly? Any help would be greatly appreciated.

Thanks in advance,

Joshua S.

[sven]

The problem is that .hidden-tab-bar and .x-tab-panel are on the same element. Thereof the selector would be ".hidden-tab-bar.x-tab-panel" which is not yet currently supported cross browser.

You can remove this .x-tab-panel in between. Another problem which you will get than with this approach is that you will also hide the header of any child TabPanel. The correct solution would be to add assign the display none directly to the correct element.,