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.

enter image description here

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.

score 6 · Answer 1 · edited Jul 27 '12 at 21:16

6

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);

edited Jul 27 '12 at 21:16

Spudley

157,081
38
222
293

answered Jul 27 '12 at 14:16

Simon

69
1
2

score 2 · Accepted Answer · answered Apr 21 '11 at 12:55

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.

score 1 · Answer 3 · answered Apr 21 '11 at 12:38

1

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.

answered Apr 21 '11 at 12:38

jvenema

42,243
5
64
107

score 0 · Answer 4 · answered Aug 01 '14 at 00:59

0

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);

answered Aug 01 '14 at 00:59

AllenHo

1
1

ExtJS 3.2.0, hide tabpanel's header

4 Answers4