How to programmatically hide tab in TabPanel (ExtJS 3)

Question

This is my TabPanel code:

inside the code there are two tabs (tab1 and tab2) in TabPanel (tabs_panel)

MyTabPanelUi = Ext.extend(Ext.TabPanel, { activeTab: 0, height: 210, resizeTabs: true, tabWidth: 266, id: 'tabs_panel', initComponent: function () { this.items = [{ xtype: 'panel', title: 'Project', padding: 20, height: 150, id: 'tab1' }, { xtype: 'panel', title: 'Service', height: 150, padding: 20, id: 'tab2' }] } }); 

I am trying to hide tab2 using the following code, but this code below

 var tabPanel = Ext.getCmp('tabs_panel'); var tabToHide = Ext.getCmp('tab2'); tabPanel.hideTabStripItem(tabToHide); 

but somehow this code does not work for me. How can I fix the problem?

Answer 1

You have two options:

 var tabPanel = Ext.getCmp('tabs_panel'); tabPanel.hideTabStripItem("tab2"); // with tab id 

or

 var tabPanel = Ext.getCmp('tabs_panel'); tabPanel.hideTabStripItem(1); // with tab index 

Answer 2

try this one

Ext.getCmp ("Bookmark"). Child ('# identifier'). Tab.hide ()