articles

Home / DeveloperSection / Articles / Hide/Unhide the TabBar of TabPanel in Sencha Touch

Hide/Unhide the TabBar of TabPanel in Sencha Touch

Sumit Kesarwani 21222 15-Jun-2013

In this article, I’m explaining how to hide/unhide the tabBar of tabpanel in sencha touch.

Tab Panels are a great way to allow the user to switch between several pages that are all full screen. Each Component in the Tab Panel gets its own Tab, which shows the Component when tapped on. Tabs can be positioned at the top or the bottom of the Tab Panel, and can optionally accept title and icon configurations.

Our need is to hide/unhide the tabbar of tabpanel when the user tap/click on the button.

Step 1:

Drag-n-drop the tabpanel from the toolbar to the canvas .

Ext.define('MyApp.view.MyTabPanel', {

    extend: 'Ext.tab.Panel',
 
    config: {
        items: [
            {
                xtype: 'container',
                title: 'Tab 1'
            },
            {
                xtype: 'container',
                title: 'Tab 2'
            },
            {
                xtype: 'container',
                title: 'Tab 3'
            }
        ]
    }
});

 Step 2:

Now add toolbar which shows on top of the panel and add titlebar which shows on bottom of the panel.

Also add two buttons which shows on the toolbar.  

Ext.define('MyApp.view.MyTabPanel', {

    extend: 'Ext.tab.Panel',

    config: {
        items: [
            {
                xtype: 'container',
                title: 'Tab 1',
                html: 'Tab 1 : Screen',
                styleHtmlContent: true,
                items: [
                    {
                        xtype: 'toolbar',
                        docked: 'top',
                        itemId: 'mytoolbar',
                        title: 'Header',
                        items: [
                            {
                                xtype: 'button',
                                id: 'hide',
                                itemId: 'mybutton',
                                text: 'Hide TabBar'
                            },
                            {
                                xtype: 'spacer'
                            },
                            {
                                xtype: 'button',
                                id: 'show',
                                itemId: 'mybutton1',
                                text: 'Show TabBar'
                            }
                        ],
                        listeners: [
                            {
                                fn: function(component, eOpts) {
                                    Ext.getCmp('show').hide();
                                },
                                event: 'initialize'
                            }
                        ]
                    },
                    {
                        xtype: 'titlebar',
                        docked: 'bottom',
                        ui: 'light',
                        title: 'Footer'
                    }
                ]
            },
            {
                xtype: 'container',
                title: 'Tab 2',
                html: 'Tab 2 : Screen',
                styleHtmlContent: true,
                items: [
                    {
                        xtype: 'titlebar',
                        docked: 'top',
                        title: 'Header'
                    },
                    {
                        xtype: 'titlebar',
                        docked: 'bottom',
                        ui: 'light',
                        title: 'Footer'
                    }
                ]
            },
                        {
                xtype: 'container',
                title: 'Tab 3',
                html: 'Tab 3 : Screen',
                styleHtmlContent: true,
                items: [
                    {
                        xtype: 'titlebar',
                        docked: 'top',
                        title: 'Header'
                    },
                    {
                        xtype: 'titlebar',
                        docked: 'bottom',
                        ui: 'light',
                        title: 'Footer'
                    }
                ]
            }
        ]
});

Step 3:

Next we add tap events of buttons and write the below code.

    onHideButtonTap: function(button, e, eOpts) {

        this.getTabBar().hide();
        button.hide();
        Ext.getCmp('show').show();
    },
 
    onShowButtonTap: function(button, e, eOpts) {
        this.getTabBar().show();
        button.hide();
        Ext.getCmp('hide').show();
    } 
Output

Hide/Unhide the TabBar of TabPanel in Sencha Touch

When you click on Hide TabBar button the tabBar will hide like this:

Hide/Unhide the TabBar of TabPanel in Sencha Touch

TabBar hides and when you click the Show TabBar button the tabBar will show again.

 


Updated 03-Feb-2020

Leave Comment

Comments

Liked By