extjs3 dropdown menu adjust positioning

Question

            var tpl = new Ext.XTemplate(
                '<tpl for=".">',
                '<div class="thumb-wrap">',
                '<img src="../images/warning.png" style="vertical-align: middle;" title="Warning">',
                '<span class="x-editable" style="margin-left: 3px;">{text}</span></div>',
                '</tpl>',
                '<div class="x-clear"></div>'
            );

            var msg = store.proxy.lastDataTableObject.logMessages;                
            var topToolbar = this.gridPanel.topToolbar;

            if (msg && msg.length > 0) {                    
                //Warning Messages menu
                topToolbar.insert(topToolbar.items.items.length - 1,{
                    text: "Warning Messages",
                    menu: {
                        xtype: 'menu',
                        autoScroll: true,
                        maxHeight: 200,
                        items: [
                            new Ext.DataView({
                                store: new Ext.data.SimpleStore({data: msg, fields: ['text']}),
                                tpl: tpl,
                                autoWidth: true,
                                multiSelect: true,
                                overClass: 'x-view-over',
                                itemSelector: 'div.thumb-wrap',
                                emptyText: 'No warnings to display'
                            })
                        ]
                    }
                });
                topToolbar.doLayout();

I've made this menu with a DataView inside. My ultimate goal is to add maxHeight and make it so the dropdown element's top right corner is always anchored to the button element's bottom right corner.

Here's what happens at the moment:

With a fixed height the problem with the anchoring still persists, but at least the menu drops down as it should:

Answer 1

You can use the menuAlign config on the toolbar button with a value of tr-br which will align your element's (in your case, the menu) top right corner to your target's (in your case, the button) bottom right corner.

if (msg && msg.length > 0) {
    topToolbar.insert(topToolbar.items.items.length - 1,{
        text: "Warning Messages",
        menuAlign: 'tr-br',  // Add this line here
        menu: {
            xtype: 'menu',
            ...
        }
    });
    topToolbar.doLayout();
}

Here's a working example on Sencha's fiddle site based on your code for your reference.