Bad menu positionning when adding items

[jchristen]

Adding items to menu causes it to be badly re-positionned.

btn1 = Ext.create('Ext.button.Button', {
    text: 'Menu1',
    menu:{    
        items: [{
            text: 'regular item 1'
        },{
            text: 'regular item 2'
        },{
            text: 'regular item 3'
        }],
    }
});

btn2 = Ext.create('Ext.button.Button', {
    text: 'Menu2',
    listeners: {menushow: {fn: function(){ 
        this.menu.add(new Ext.menu.Item({text:"New item"}));
    }}},
    menu:{    
        items: [{
            text: 'regular item 1'
        },{
            text: 'regular item 2'
        },{
            text: 'regular item 3'
        }]
    }
});


win = Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    dockedItems: {
        xtype: 'grid',
        border: false,
        columns: [{header: 'World'}],                 // One header just for show. There's no data,
        store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
    }
}).show();

win.header.insert(0, btn1);
win.header.insert(1, btn2);

Menu1 is OK:
ExtMenu1.png

Menu2 is display below window's header and docked items:
ExtMenu2.png

Tested on http://docs.sencha.com/extjs/6.5.2/classic embedded fiddle and Ext JS 6.5.3.57 - Classic Triton : https://fiddle.sencha.com/#view/editor&fiddle/2h3p.

[keckeroo]

Thanks for the report! I have opened a bug in our bug tracker.