View Full Version : How do you hide a tab?

23 Jul 2010, 6:55 AM
I tried adding the hidden attribute but it does nothing. Thanks in advance.

var myPanel = new Ext.TabPanel({
type: 'light',
items: [{
xtype: 'container',
title: 'Tab title',
iconCls: 'bookmarks',
layout: 'fit',
items: myForm,

}, {
iconCls: 'favorites',
title: 'Log',
hidden: true

23 Jul 2010, 10:45 AM
When you set an attribute in a tab, that attribute applies to the card with the exception of a few select attributes (iconCls, title and badgeText). There's currently no config option I could find that allows you to hide a tab, but below is a code sample that will allow you to do it dynamically, and then reshow it when needed. If you want a simpler way you can add a feature request.

Ext.setup({ onReady: function () {
new Ext.TabPanel({
fullscreen: true,
items: [{ html: 'card1', title: 'tab1' },
{ html: 'card2', title: 'tab2' },
{ html: 'card3', title: 'tab3'}],
listeners: {
afterrender: function () {

26 Jul 2010, 6:30 AM
Thanks for the advice. Well, the tab by default is hidden so no prob there. I guess what I need to do is hide the icon so the user can't click it until I display it. So how does one hide a tab icon?

26 Jul 2010, 4:22 PM
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
var tabs = new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
items: [{
title: 'Tab 1',
html: '1',
cls: 'card1'
}, {
title: 'Tab 2',
html: '2',
cls: 'card2'
}, {
title: 'Tab 3',
html: '3',
cls: 'card3'