defaultAlign property not working

[cflynn07]

dockedItems: [{        xtype: 'toolbar',
        dock: 'bottom',
        layout: 'hbox',
        pack: 'center',
        items: [{
            xtype: 'button',
            text: 'menu button',
            menu: {
                xtype: 'menu',
                defaultAlign: 'tr-bl',
                width: 300,
                height: 300,
                items: [
                    {text: 'item 1'},
                    {text: 'item 1'},
                    {text: 'item 1'}
                ]
            }
        }]
}],

I have a menu that's paired with a button on a toolbar, and I'm attempting to play with the 'defaultAlign' property to change how that menu is anchored to the button. The first time I open the menu it appears to be attached to 'bl-bl' so it's directly over the button.

The second time I click the button the menu is anchored at 'bl-tl' regardless of what I specify for defaultAlign.

Ext JS 4.0.7

Second time after opening:

Screen Shot 2012-02-01 at 4.42.58 PM.png

[mitchellsimoens]

This has and hasn't been fixed in 4.1.0 beta2. This works just fine at aligning the menu to the top of the button:

new Ext.container.Viewport({
    layout : 'fit',
    items  : {
        xtype       : 'panel',
        dockedItems : [
            {
                xtype    : 'toolbar',
                dock     : 'bottom',
                items    : [
                    {
                        xtype : 'button',
                        text  : 'Add',
                        menu  : {
                            items : [
                                { text : 'Item 1' },
                                { text : 'Item 2' }
                            ]
                        }
                    }
                ]
            }
        ]
    }
});

But testing this more as to why this worked and not yours I found a new bug that we get to fix. The bug appears when you give the menu a height, then the menu is aligned 1/3 way up from the bottom:

new Ext.container.Viewport({
    layout : 'fit',
    items  : {
        xtype       : 'panel',
        dockedItems : [
            {
                xtype    : 'toolbar',
                dock     : 'bottom',
                items    : [
                    {
                        xtype : 'button',
                        text  : 'Add',
                        menu  : {
                            height : 300,
                            items  : [
                                { text : 'Item 1' },
                                { text : 'Item 2' }
                            ]
                        }
                    }
                ]
            }
        ]
    }
});