如何使下拉宽度等于拆分按钮宽度？

Question

我有一个带有菜单项的 splibutton。我想让下拉菜单的宽度等于拆分按钮的宽度。此外，我想将文本居中对齐。我应该怎么做？

Answer 1

菜单的宽度将根据里面内容的宽度而定。因此，如果按钮的宽度始终相同，您可以将菜单的宽度设置为相同的值，或者您可以获取按钮的宽度并在呈现之前将其设置到菜单。

至于文本居中，您有两种选择。通过 CSS，将自定义 CLS 添加到您的菜单并添加以下 CSS:

.yourCustomCls .x-menu-item-link {
    text-align: center;
}
.yourCustomCls .x-menu-item-indent-no-separator {
    margin-left: 0;
}

或者将配置 plain: true 添加到您的菜单中，并在我的示例中添加居中文本的样式。

示例：

Ext.create('Ext.button.Split', {
        renderTo: Ext.getBody(),
        text: 'Commit Automatically',
        menu: new Ext.menu.Menu({
            plain: true,
            style: 'text-align: center;',
            items: [
                {text: 'Commit On Trigger', handler: function(){ alert("Item 1 clicked"); }}
            ],
            listeners: {
                beforerender: function () {
                    this.setWidth(this.up('button').getWidth());
                }
            }
        })
    });

如何使下拉宽度等于拆分按钮宽度？

How to make dropdown width equal to splitbutton width?

extjs