How can i use a button on a sencha tabbar to put an overlay panel

Question

I am working with a sencha app and we have 3 tab panels but want to add an extra button to the tab bar that instead of sliding to a tab, just overlays a panel with buttons ontop of the first tabpanel. Eg if you are on the first tab and press the button then the overlay panel is displayed over top. If you are on the third tab panel it then takes you back to the first tabpanel and overlays the button panel.

I can display the button but can not get it to just overlay the tab panel with a panel with the buttons.

MainPanel:

    Ext.define("MyApp.view.Main", {
    extend: 'Ext.Panel',
    requires: ['Ext.TitleBar', 'Ext.tab.Panel'],

    config: {
        fullscreen: true,
        id: 'viewMain',
        layout: 'vbox',
        items: [
            {
                xtype: 'topbar'
            },
            {
                xtype: 'tabpanel',
                tabBarPosition: 'bottom',
                flex: 1,
                id: 'mainTabs',
                cardSwitchAnimation: false,
                animation: false,
                ui: 'bottom',
                items: [
                    {
                        xtype: 'mappanel',
                        id: 'mapPanel'
                    },
                    {
                        xtype: 'showbutton'
                    },
                    {
                        xtype: 'searchpanel'
                    },
                    {
                        xtype: 'directionspanel'
                    },
                    {
                        xtype: 'rcpanel'
                    }
                ]
            }
        ]
            }
});

ShowButton:

    Ext.define("MyApp.view.ShowButton", {
    extend: 'Ext.Button',
    requires: ['Ext.Button'],
    xtype: 'showbutton',

    config: {
        title: 'Show',
        iconCls: 'locate4',
        id: 'showBtn',
        text: 'OK',
        id: 'showBtn',
        iconCls: 'locate4',
        iconMask: true,
        handler: function () {
            this.fireEvent('onShowBar', this);
        }
    }
});

ShowController

    Ext.define('MyApp.controller.ShowController', {
    extend: 'MyApp.controller.BaseController',

    config: {
        refs: {
        },
        control: {
        }
    },

    //called when the Application is launched, remove if not needed
    launch: function(app) {

    },
    onShowBar: function () {
        var newShowBar = {
            xtype: 'showBar',
            docked: 'bottom'
        };
        this.add([newShowBar]);
    }
});

ShowBar:

    Ext.define("MyApp.view.ShowBar", {
    extend: 'Ext.Panel',
    xtype: 'showbar',

    config: {
        iconCls: 'locate4',
        docked: 'bottom',
        modal: false,
        style: 'opacity:0.8',
                items: [
                                    {
                                        iconCls: 'home',
                                        iconMask: true,
                                        poiGroup: 'accomm'
                                    },
                                    {
                                        iconCls: 'star',
                                        iconMask: true,
                                        poiGroup: 'attractions'
                                    }/*,
                                    {
                                        iconCls: 'hotoffer',
                                        iconMask: true,
                                        poiGroup: 'membersavings'
                                    }*/
                                ]

    }
});

score 0 · Accepted Answer · answered Oct 21 '12 at 22:53

I would suggest using a toolbar docked at the bottom of a container (layout: card) which contains your other views, instead of using the tabbar. If you add buttons to the toolbar and set animations for switching views, the toolbar behaves just like the tabbar. It also allows you to add an extra button which displays your overlay.

How can i use a button on a sencha tabbar to put an overlay panel

1 Answers1