javascript - 如何在表格上居中按钮并让该表格填充 ExtJS 中的容器？

Question

我是 ExtJS 的新手，我无法在容器中将按钮居中。我的代码基于 Sencha 网站上的文档；但是，我没有看到关于居中的明确解释。以下是我目前所拥有的：

                items: [{
                    html: content,
                    title: 'Navigation',
                    autoScroll: true,
                    border: false,
                    iconCls: 'nav'
                }, {
                    title: 'Other',
                    border: false,
                    autoScroll: true,
                    iconCls: 'settings',
                    items: [{
                        xtype: 'container',
                        layout: {
                            type: 'table',
                            columns: 1,
                            tdAttrs: {
                                style: {
                                    layout: 'fit',
                                    padding: '5px 10px',
                                    background: 'red'
                                }
                            }
                        },
                        items: [{
                            xtype: 'button',
                            width: '100%',
                            glyph: 72,
                            text: 'Logoff',
                            scale: 'large',
                            iconAlign: 'top',
                            buttonAlign: 'center'
                        }]
                    }]
                }]

这是我当前网站的屏幕截图。

如您所见，它是左对齐的，无论我尝试什么，我似乎都无法将它置于列的中心。

Answer 1

有一个居中布局的用户扩展，但您也可以使用以下 vbox 布局配置来实现它：

layout: {
    align: 'center',
    pack: 'center',
    type: 'vbox'
}

Answer 2

有时 css 会覆盖自身，因为它非常基本但快速，只需添加一些

   

内联和在您的元素之前。这只是一个空白字符的html代码..

Answer 3

您可以使用 cls 属性将自己的 CSS 类添加到按钮，如下所示

items: [{
        xtype: 'button',
        width: '100%',
        glyph: 72,
        text: 'Logoff',
        scale: 'large',
        iconAlign: 'top',
        buttonAlign: 'center',
        cls: 'yourclassName'
    }]

然后定义 CSS 类 yourClassName

希望这可以帮助