How to hide tab in ExtJS 4

Question

How to hide tab in ExtJS 4? Ext.getCmp("mytab").hide() doesn't work Can any one help me?

Worldbeater

Answer 1

Read the documentation here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tab.Panel

They give a specific example of how to hide tabs

Extracted from link:

    var tabs = Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    renderTo: document.body,
    items: [{
            title: 'Home',
            html: 'Home',
            itemId: 'home'
        }, {
            title: 'Users',
            html: 'Users',
            itemId: 'users',
            hidden: true
        }, {
            title: 'Tickets',
            html: 'Tickets',
            itemId: 'tickets'
        }]
 });
 setTimeout(function () {
    tabs.child('#home')
        .tab.hide();
    var users = tabs.child('#users');
    users.tab.show();
    tabs.setActiveTab(users);
 }, 1000);

Marsipobranch

I used tabs.hideTabStripItem(<the tab to hide>) and tabs.unhideTabStripItem(<the tab to show>) – Selfmastery

Answer 2

If your tab panel has ID, and components have ID or Item ID, you can do following: Ext.getCmp('TAB_PANEL_ID').getComponent('ITEM_ID').tab.hide()

For example,

var tabPanel = Ext.create("Ext.tab.Panel", {
               id: 'TAB_PANEL_ID',
               renderTo: Ext.getBody(),
               items:[{
                   title: 'Tab 1',
                   itemId: 'TAB_1',
                   html: 'This is the first tab'
               },{
                   title: 'Tab 2',
                   itemId: 'TAB_2',
                   html: 'This is the second tab'                                     
              },{
                   title: 'Tab 3',
                   itemId: 'TAB_3',
                   html: 'This is the third tab'                          
             }]                  
});

// You may want to add following in function body or inside event handler.
// Hide the second tab:     
Ext.getCmp('TAB_PANEL_ID').getComponent('TAB_2').tab.hide();

// Show the second tab:  
Ext.getCmp('TAB_PANEL_ID').getComponent('TAB_2').tab.show();

Manure

Answer 3

This is my example to disable/enable the tab's content.

In this example, we have a button named "Desabilitar", click him and the first child of the tab will be disable. The tab content will enabled in 9 seconds.

https://fiddle.sencha.com/fiddle/21h/preview

Jereme