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'
                        }]
                    }]
                }]

这是一个screenshot我当前的网站。

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

Answer 1

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

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