2

下部にドッキングされたツールバーの 2 つのボタンを中央揃えにする方法を考えていました。私が見たボタンでこれに対処する唯一の属性はcentered、ボタンを完全に重なるように中央に配置することでした.中央にそれらをグループ化する方法はありますか?

ここに私が取り組んできたいくつかのコードがあります: http://www.senchafiddle.com/#xTZZg#k24Ni

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'SenchaFiddle',

    launch: function () {

        var panelNewForm = Ext.create('Ext.Panel', {
            id: 'panelNewForm',
            title: 'TEST',
            html: 'TEST',
            pack: 'center',
            items: [{
                xtype: 'toolbar',
                docked: 'bottom',
                layout: {
                    type: 'hbox',
                    align: 'center'
                },
                items: [{
                    ui: 'decline',
                    text: 'Cancel',
                    handler: function () {

                    }
                }, {
                    ui: 'confirm',
                    text: 'Save',
                    handler: function () {

                    }
                }]
            }]
        });
        Ext.Viewport.add(panelNewForm);
    }
});
4

2 に答える 2

10

レイアウトtoolbar構成を与えることができます：

layout: {
    pack: 'center',
    type: 'hbox'
}

これにより、アイテムがこのツールバーの中央に水平にレンダリングされます。

于 2013-02-11T15:17:28.770 に答える
0

xtype:'spacer'を使用してそれらを中心にすることもできます。Ext.Spacer コンポーネントは、通常、Ext.Toolbar コンポーネント内のアイテム間にスペースを入れるために使用されます。Plzはsenchaのドキュメントを参照してください

さて、ここにあなたのコードサンプルがあります:

 items: [{
                xtype: 'toolbar',
                docked: 'bottom',                
                items: [{
                    xtype:'spacer'
                },
                {
                    ui: 'decline',
                    text: 'Cancel',
                    handler: function () {

                    }
                }, {
                    ui: 'confirm',
                    text: 'Save',
                    handler: function () {

                    }
                },{
                    xtype:'spacer'
                }]
            }]

注: さまざまなフレックスを与えることで、中心を調整することもできます

于 2014-10-17T05:21:31.543 に答える