Monday 25 November 2013

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.

1 comment:

  1. If tab1 has this
    {
    xtype: 'textfield',
    id: 'home_address_1',
    name : 'address1',
    label: 'Home Address'
    }

    and tab2 has this
    {
    xtype: 'textfield',
    id: 'office_address_1',
    name : 'address2',
    label: 'Office Address'
    }

    Case:
    When an user types in tab1 textfield, it automatically also displayed in tab2 textfield and vice-versa.
    i.e. both field always display/have same value.

    Can we do this?????

    ReplyDelete