ExtJS:下拉菜单对齐方式不正确

我有一个带有菜单和自定义菜单标记设置的splitbutton（这样下拉菜单的右上角将与splitbutton的右下角对齐）

问题：第一次单击拆分按钮时，菜单未正确对齐。不过，后续的单击操作效果良好。在Chrome和FF中看到相同的行为，ExtJS 4.0.2a

有什么想法吗？谢谢

{
    xtype: 'toolbar',
    items: [
        {
            xtype: 'triggerfield',
            width: 335,
            emptyText: 'Search',
            triggerCls: 'x-form-search-trigger'
        },
        '->',
        {
            xtype: 'splitbutton',
            text: 'Account',
            menuAlign: 'tr-br',
            menu: {
                xtype: 'menu',
                plain: true,
                items: [
                    {
                        xtype: 'container',
                        html: 'image here...'
                    },
                    {
                        xtype: 'button',
                        width: 10,
                        text: 'Log Out'
                    }
                ]
            }
        }
    ]
}

好的，所以我想出了一个“这并不漂亮，但它完成了任务”的解决办法：在菜单渲染后快速隐藏，然后显示。换句话说，当有人第一次单击并呈现菜单时，会自动将其隐藏，然后再次显示。当它重新显示时，对齐是正确的。以下是新代码：

{
    xtype: 'toolbar',
    items: [
        {
            xtype: 'triggerfield',
            width: 335,
            emptyText: 'Search',
            triggerCls: 'x-form-search-trigger'
        },
        '->',
        {
            xtype: 'splitbutton',
            text: 'Account',
            menuAlign: 'tr-br',
            menu: {
                xtype: 'menu',
                plain: true,
                items: [
                    {
                        xtype: 'container',
                        html: 'Image here...'
                    },
                    {
                        xtype: 'button',
                        text: 'Log Out'
                    }
                ],
                listeners: {
                    afterrender: function(component) {
                        // Hide menu and then re-show so that alignment is correct.
                        component.hide();
                        component.show();
                    }
                }
            }
        }
    ]
}

我变了

component.hide();
component.show();

到

---

哪个IMO更干净，工作原理相同（至少在我的情况下）。

隐藏/显示变体速度更快。*。要解决这样一个简单的问题，doLayout（）简直是一门大炮

我强烈建议观看本视频教程：

它大约有45分钟长，但对于那些不太了解布局的人来说，它清除了很多东西

编辑：

---

现在我想起来了，我不确定.show（）/.hide（）是否在代码中的某个地方触发了doLayout（）。必须验证：）

嗯，有趣的问题，我也遇到了（+1用于快速修复：）我也面临类似的问题，谢谢修复。：-）+1我正在搜索下拉菜单，您的代码帮助我完成了这项工作。哇！

component.doLayout();