我如何中心一个按钮在表上，并有表填充在ExtJS的容器

How do I center a button on a table and have that table fill a container in ExtJS?

本文关键字：填充 ExtJS 一个 按钮 何中心      更新时间：2023-09-26

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

这是我当前网站的截图。

正如你所看到的，它是左对齐的，无论我怎么做，我似乎都不能把它放在列的中心

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

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

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

   

内嵌在元素之前。它只是一个空白字符的html代码。

你可以使用cls属性为按钮添加你自己的CSS类，如下图

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

然后定义CSS类yourClassName

希望能有所帮助

相关文章：