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

デフォルトでは、幅が設定されていない限り、スペーサーコンポーネントは1のフレックスを取ります。これは、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をオーバーロードして、と同じように表示できる場合がありますがtoolbar、息を止めません。

注意::stretchコンポーネントは、コンテナを満たすために垂直方向に引き伸ばされます。

于 2011-09-30T01:54:40.237 に答える