---
title: "Hide/Unhide the TabBar of TabPanel in Sencha Touch"  
description: "In this article, I’m explaining how to hide/unhide the tabBar of tabpanel in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-15  
updated: 2020-02-03  
canonical: https://www.mindstick.com/articles/1330/hide-unhide-the-tabbar-of-tabpanel-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 8 minutes  

---

# Hide/Unhide the TabBar of TabPanel in Sencha Touch

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370), I’m explaining how to hide/unhide the tabBar of tabpanel in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

Tab Panels are a great way to allow the user to [switch](https://www.mindstick.com/blog/104495/switch-bringing-new-advancements-in-the-education-management-system) between several pages that are all full [screen](https://www.mindstick.com/blog/53499/top-5-big-screen-tvs-for-the-best-tv-shows-of-2019). Each [Component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) 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](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net).

##### Step 1:

Drag-n-drop the tabpanel from the toolbar to the [canvas](https://www.mindstick.com/forum/1383/how-can-i-print-a-canvas-in-wpf) .

```
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](https://www.mindstick.com/forum/1013/how-to-change-font-color-and-size-of-titlebar-in-sencha-touch) which shows on bottom of the panel.

Also [add two](https://www.mindstick.com/forum/480/add-two-number) 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](https://www.mindstick.com/blog/102/events-in-c-sharp) 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](https://www.mindstick.com/mindstickarticle/3249dd91-6f76-4f50-be66-81bdd5004b9b/images/d1537a04-26bf-4a85-84c3-490493b87e29.png)

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

![Hide/Unhide the TabBar of TabPanel in Sencha Touch](https://www.mindstick.com/mindstickarticle/3249dd91-6f76-4f50-be66-81bdd5004b9b/images/aff938c3-7ded-4f27-bad0-cbd03a47ae2c.png)

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

---

Original Source: https://www.mindstick.com/articles/1330/hide-unhide-the-tabbar-of-tabpanel-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.