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

igsr9ssn 于 2022-11-04 发布在其他

关注(0)|答案(1)|浏览(158)

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

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

请参考下图-

它应该看起来像这样-

extjs

来源：https://stackoverflow.com/questions/70276941/extjs6-how-to-handle-overflow-for-panel-header-items

1条答案

按热度按时间

xnifntxz1#

你可以使用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'
                }]
            });
        });
    }
});

赞(0）回复(0）举报 2022-11-04

我来回答

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

1条答案

相关问题

热门标签

最新问答