如何使下拉宽度等于splitbutton宽度？

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

或者将config 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());
                }
            }
        })
    });