javascript - アイテムを含むレイアウトのセンタリング

Question

このようなパネルを作成しました。

パネルのフィドルはこちらから入手できます。

ボタン、Set Settings および Cancel をこのパネルの中央に配置します。

タグで設定autoElしてみましcenterたがダメでした。すべてのアイテムを引き延ばしたくないので、フォーム パネルは使用していません。

Extjs4でこれを達成するにはどうすればよいですか?

Answer 1

'hbox' レイアウト (パネル レイアウトに使用したもの) は絶対レイアウトであるため、ポイントに到達するにはいくつかの CSS トリックを実行する必要があります。ボタンの yout JS 部分を次のように編集します。

xtype: 'panel',
cls: 'mypanel', // Add CSS Class
layout: 'hbox', // Don't need align: 'stretch'
items:[{
    xtype: 'button',
    text: 'Set Settings'
},{
    xtype: 'button',
    text: 'Cancel',
    cls: 'btn-gap' // Instead of your Box item (for gap between 2 buttons)
}

そして、カスタム CSS ファイルがそのトリックを実行します。

.x-panel.mypanel {
        text-align: center;
}
.x-panel.mypanel .x-btn {
        position: static !important;
}
.x-panel.mypanel .x-btn.btn-gap {
        margin-left: 25px !important;
}

これを行うには他にもいくつかの方法がありますが、これが最初に頭に浮かんだもので、これも簡単です。