How to hide tab in ExtJS 4

Question

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

Answer 1

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

They provide a concrete example of how to hide tabs.

Extracted from the 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); 

Answer 2

If your tab bar has an identifier and the components have an identifier or product identifier, you can do the following: Ext.getCmp ('TAB_PANEL_ID'). getComponent ('ITEM_ID'). tab.hide ()

For instance,

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

Answer 3

This is my example to disable / enable tab contents.

In this example, we have a button called "Desabilitar", click on it, and the first child of the tab will be disabled. The contents of the tab will be turned on after 9 seconds.

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