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

Hide/Unhide the TabBar of TabPanel in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 11635  View(s)
Rate this:

Hide/Unhide the TabBar of TabPanel in Sencha Touch

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.

 


Don't want to miss updates? Please click the below button!

Follow MindStick