ExtJS: Incorrect Dropdown Menu Alignment

Question

I've got a splitbutton with a menu and a custom menuAlign setting (so that the top-right corner of the drop-down menu will be aligned with the bottom-right corner of the splitbutton).

Problem: the first time you click the splitbutton, the menu isn't aligned correctly. Subsequent clicks work fine, however. Seeing the same behavior in Chrome and FF, ExtJS 4.0.2a.

Any ideas? Thanks!

{
    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

Ok, so I came up with an "it ain't pretty but it gets the job done" work-around: quickly hide, then show, the menu after it is rendered. In other words, when someone clicks the first time and the menu is rendered, automatically hide it then show it again. When it's re-shown, the alignment is correct. Here's the new code:

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

Answer 2

I changed

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

to

component.doLayout();

which IMO is cleaner and works the same (at least in my case).