Sencha Touch 2 : How to hide the Tab bar from Tab panel component

As requested by one of my reader, today we are going to see how we can hide tabbar from the tabpanel component. By setting setHidden(true) or setStyle('display:none'), it won't hide the tab bar.

First, lets create default tab panel with three tab bars (Tab1, Tab2, Tab3) with their respective configuration properties.

Ext.define('MyApp.view.MyTabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.mytabpanel',

    config: {
        items: [{
            xtype: 'container',
            title: 'Tab 1',
            itemId: 'container1'
        }, {
            xtype: 'container',
            title: 'Tab 2',
            itemId: 'container2'
        }, {
            xtype: 'container',
            title: 'Tab 3',
            itemId: 'container3'
        }]
    }
})

Here is the browser output,

Now, we are going to see, how we can hide the tab bars (Tab1, Tab2, Tab3). In order to hide the first tab bar, you need to use the below code.

this.getTabBar().getComponent(0).hide();

First, we are getting the tabpanel object using (this.getTabBar()), then in order to get the first Tab bar component (Tab1) you need to use getComponent(0). Finally, hide() will hide the tab bar from the browser output.

In order to hide the third tab bar component (Tab3), here is the code.

this.getTabBar().getComponent(2).hide();

If you need to hide the entire tab panel, here is the code.

this.getTabBar().hide();

Hope, you enjoyed this Post.