Как выровнять элементы внутри tabPanel в сенсорном Сенча

Question

У меня есть эта простая вкладка внутри 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'},
    ],

});

Я бы хотел, чтобы "элементы" плавали влево, по центру и вправо, добавляя кучу спейсеров, это не "действительно" хороший выбор.

Есть идеи, как этого добиться?

Answer 1

По умолчанию компонент spacer принимает значение flex, равное 1, если ширина не установлена. Что, я думаю, означает разместить кнопку на каждой стороне панели вкладок, вам понадобится только 1 проставка, если вы не указали ширину. Тем не менее tabBar должен иметь другой макет по умолчанию для toolbar который работает:

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'
    }]
});

Вы могли бы перегружать tabBar отображать так же, как toolbar но я бы не задержал дыхание.

NB: stretch: Компоненты растягиваются вертикально, чтобы заполнить контейнер.