Extjs6如何处理面板标题项目的溢出答案

【问题标题】：Extjs6 How to handle overflow for Panel Header itemsExtjs6如何处理面板标题项目的溢出
【发布时间】：2021-12-08 14:48:31
【问题描述】：

我想处理面板标题项的溢出。当按钮数量超过屏幕宽度时，折叠图标和按钮不可见。我想让标题可滚动或在下拉菜单中显示溢出项。

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

请参考下图-

应该是这个样子-

【问题讨论】：

标签： javascript extjs extjs6

【解决方案1】：

您可以使用Ext.toolbar.Toolbar 获得所需的结果，它有一个overflowHandler 配置，您可以将其设置为menu。试试这个：

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

【讨论】：

尝试在页眉中添加工具栏，但没有成功
查看this fiddle。
感谢您的帮助，在进行此更改后，Peter 的折叠按钮熄灭了
好吧，如果你想在标题中添加工具栏，它会覆盖折叠工具。您可以在标题下方添加工具栏，以便两者都可见。检查链接的小提琴，我用新版本更新了它。