ExtJS 工具栏溢出处理程序不显示在屏幕调整大小

Question

我在面板内创建了一个工具栏header，但溢出菜单没有出现在屏幕调整大小时。
屏幕未调整大小时的菜单

在屏幕调整大小时，按钮未显示在溢出菜单中。

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'
                    }]

                }
            });
        });
    }
});

Answer 1

这里是fiddle。我使用 hbox 设置布局，并在 header 中的两个不同组件上设置 flex。还将面板和 header 设置为 resizable: true.

ExtJS 工具栏溢出处理程序不显示在屏幕调整大小

ExtJS Toolbar Overflow Handler not displaying on screen resize

javascript

extjs

extjs6