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

Answer 2

有时候css会覆盖自己，因为它非常基本但很快就可以添加一些

 &nbsp;&nbsp;

内联和元素之前。它只是一个空白字符的HTML代码..

Answer 3

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

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

然后定义CSS类yourClassName

希望这有帮助

如何在桌面上居中按钮并让该表填充ExtJS中的容器？

3 个答案: