Question

I have this simple tabBar inside a TabPanel:

MyApp.views.Viewport = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    tabBar: {
        dock: 'bottom',
        layout: {
            type: 'hbox',
            align: 'stretch'
        },

    },
    items: [
        { xtype: 'homecard', id: 'home'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'spacer'},
        { xtype: 'settingscard', id: 'settings'},
    ],

});

I’d like to be able to make ‘elements’ float left, center and right, adding bunch of spacer’s isn’t a ‘really’ good choice.

Any idea on how to achieve this ?

Answer 1

By default the spacer component will take up a flex of 1 unless a width is set. Which I think means to put a button on each side of the tabBar you should only need 1 spacer as long as you don’t specify a width. However the tabBar must have a different default layout to the toolbar which works:

MyApp.views.Viewport = Ext.extend(Ext.Panel({
    fullscreen: true,
    layout: 'card',
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        defaults: {
            handler: function (btn, e) {
                MyApp.views.Viewport.setActiveItem(Ext.getCmp(btn.value));
            }
        },
        items: [{
            text: 'homecard',
            value: 'home'
        }, {
            xtype: 'spacer'
        }, {
            text: 'settingscard',
            value: 'settings'
        }],
        layout: {
            type: 'hbox',
            align: 'center'
        }
    }],
    items: [{
        title: 'homecard',
        id: 'home',
        html: 'home'
    }, {
        title: 'settingscard',
        id: 'settings',
        html: 'settings'
    }]
});

you might be able to overload the tabBar to display the same as a toolbar but i wouldn’t hold my breath.

NB: stretch : Components are stretched vertically to fill the container.