1

我在 TabPanel 中有这个简单的 tabBar：

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'},
    ],

});

我希望能够使“元素”向左、中和向右浮动，添加一堆垫片并不是一个“真正”好的选择。

关于如何实现这一目标的任何想法？

4

1 回答 1

2

默认情况下除非设置了宽度，否则spacer组件将占用 1 的 flex。我认为这意味着在 tabBar 的每一侧放置一个按钮，只要您不指定宽度，您应该只需要 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显示与 a 相同的内容，toolbar但我不会屏住呼吸。

注意：：stretch组件被垂直拉伸以填充容器。

于 2011-09-30T01:54:40.237 回答