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

Question

我有一个带有菜单和自定义 menuAlign 设置的拆分按钮(这样下拉菜单的右上角将与拆分按钮的右下角对齐)。

问题:第一次单击拆分按钮时，菜单未正确对齐。然而，随后的点击工作正常。在 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'
                    }
                ]
            }
        }
    ]
}

Answer 1

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

{
    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();
                    }
                }
            }
        }
    ]
}