javascript - 居中包含项目的布局

Question

我创建了一个这样的面板。

面板的小提琴可在此处获得。

我希望按钮、设置设置和取消位于此面板的中心。

我尝试autoEl使用center标签进行设置，但没有运气。我没有使用表单面板，因为我不希望所有项目都被拉伸。

我如何在 Extjs4 中实现这一点？

Answer 1

因为 'hbox' 布局（您已将其用于面板布局）是绝对布局，所以您必须做一些 css 技巧才能达到重点。像这样编辑按钮的 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;
}

还有其他一些方法可以做到这一点，但这是我首先想到的方法，它也很简单。