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

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

1 голос
/ 27 сентября 2011

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

});

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

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

1 Ответ

2 голосов
/ 30 сентября 2011

По умолчанию компонент spacer принимает изгиб 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, но я не задержал бы дыхание.

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

...