ExtJS: Incorrect Dropdown Menu Alignment

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'
                    }
                ]
            }
        }
    ]
}

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

I changed

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

to

component.doLayout();

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

The hide/show variant is much faster. *.doLayout() is much to big of a cannon to solve such a simple issue.

I highly recommend watching this video tutorial : http://www.sencha.com/learn/layouts-and-containers/

It's ~45 minutes long but clears up more than few things for those who don't know layouts well.

edit: Now that I think of it, I'm not sure wheteher .show()/.hide() doesn't fire doLayout() somewhere in it's code. It would have to be verified:)