Extjs6 How to handle overflow for Panel Header items

Question

I want to handle overflow for panel header items .when the number of buttons exceed the screen width the collapse icon and buttons are not visible. I want to make the header scrollable or show the overflow items in a dropdown menu.

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.onReady(function () {
            Ext.create('Ext.panel.Panel', {
                width: 200,
                height: 50,
                collapsible: true,
                renderTo: Ext.getBody(),
                title: 'title',
                layout : 'hbox',
                header: {
 
                    title: {
                        text: 'title',
                        flex: undefined
                    },
                        items: [{
                            xtype: 'button',
                            text: 'test',
                            margin: '0 10'
                        },{
                            xtype: 'button',
                            text: 'test',
                            margin: '0 10'
                        },{
                            xtype: 'button',
                            text: 'test',
                            margin: '0 10'
                        },{
                            xtype: 'button',
                            text: 'test',
                            margin: '0 10'
                        },{
                            xtype: 'button',
                            text: 'test',
                            margin: '0 10'
                        },{
                xtype:'tbfill'
            }]
                }
            });
        });
    }
});

Please refer to the below image-

It should look like this-

Answer 1

You can get the desired result using an Ext.toolbar.Toolbar, it has an overflowHandler config which you can set to menu. Try this:

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.onReady(function () {
            Ext.create('Ext.toolbar.Toolbar', {
                width: 200,
                renderTo: Ext.getBody(),
                overflowHandler: 'menu',
                items: [{
                    xtype: 'component',
                    html: 'title'
                },{
                    xtype: 'button',
                    text: 'test1'
                }, {
                    xtype: 'button',
                    text: 'test2'
                }, {
                    xtype: 'button',
                    text: 'test3'
                }, {
                    xtype: 'button',
                    text: 'test4'
                }, {
                    xtype: 'button',
                    text: 'test5'
                }]
            });
        });
    }
});