javascriptextjsextjs6

ExtJS Toolbar Overflow Handler not displaying on screen resize

I have created a toolbar inside a panel header but the overflow menu doesn't appear on screen resize.
Menu when the screen is not resized
enter image description here
On Screen resize the buttons are not showing in overflow menu.
enter image description here

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.onReady(function () {
            Ext.create('Ext.panel.Panel', {
                width: 500,
                height: 500,
                renderTo: Ext.getBody(),
                collapsible: true,
                header: {
                    title: {
                        text: 'title',
                        flex: undefined
                    },
                    items: [{
                        xtype: 'toolbar',
                        width: 400,
                        overflowHandler: 'menu',
                        items: [{
                            xtype: 'button',
                            text: 'test1'
                        }, {
                            xtype: 'button',
                            text: 'test2'
                        }, {
                            xtype: 'button',
                            text: 'test3'
                        }, {
                            xtype: 'button',
                            text: 'test4'
                        }, {
                            xtype: 'button',
                            text: 'test5'
                        }, {
                            xtype: 'button',
                            text: 'test6'
                        }],

                    }, {
                        xtype: 'tbfill'
                    }]

                }
            });
        });
    }
});
Solution

  • Here is a fiddle. I set a layout using hbox and set a flex on the two different components in the header. also set the panel and header to resizable: true.