ExtJS 3.2.0, hide tabpanel's header

Question

PLs tell me how i can hide header of tabpanel "..." if my tabpanel have only one tab?

I can't use Ext.Panel becose I use fairly sophisticated methods for generating extjs code on the server, and there is a large number of design errors that do not allow me to generate the usual Ext.Panel for this case.

tnx all, Solution: i add to css rules

.strip-hidden .x-tab-strip-wrap 
{
    display: none;
} 

.strip-show .x-tab-strip-wrap 
{
     display: block;
}

and on server side (delphi, something like ExtPascal)

if (frmContainer.Tab.Items.Count = 1) then
     frmContainer.Tab.Cls := 'strip-hidden'
   else
     frmContainer.Tab.Cls := 'strip-show';

So, it's work for me (chrome, firefox).

i add 2 rules becose i have windows in windows, so if child windows have many tabs - it will be hidden by css rule of parent window. so i have 2 rules and it works.

Schlieren

Answer 1

The only way to hide the header is to manipulate the CSS. By default, the x-tab-panel-header is applied to the header part of the panel. The following CSS

.hideHeader {

    display:none;
}

if added to the div would hide the header. To apply the css you need to make use of the headerCfg property. Refer the bodyCfg documentation for details and example of manipulating the default CSS of the panel.

Tolidine

Answer 2

In Version 4.1 you can do the following in the BeforeShow event of the panel/window with the tab control in:

Ext.getCmp('tbMyTabPanel').getTabBar().setVisible(false);

Shrill

Answer 3

You can't do that natively.

The container element in this case is already leaving space for the tab, etc. The only thing you could possibly do is add a custom CSS class, and hide the tab completely that way.

Saberio

Answer 4

You can try the following to hide a tab and its header in ExtJS 3.x:

oTab.hide();
oTab.tabEl.hidden = true;

where oTab is the your tab component getting from oTab = oTabPanel.getComponent(x);

Surinam