居中包含項目的佈局

Question

我已經創建了一個這樣的面板。

爲面板的小提琴可用here。

我想要按鈕，設置設置和取消在這個面板的中心。

我試圖設置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; 
} 

還有一些其他的方法可以做到這一點，但這是第一次來到了一個在我看來，它也很簡單。