ExtJS:下拉菜单对齐不正确

Question

我有一个带有菜单和自定义menuAlign设置的分割按钮(这样下拉菜单的右上角将与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'
                    }
                ]
            }
        }
    ]
}

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