ExtJS 在面板折叠后删除文本并将项目添加到 header

Question

我使用 Ext5，我有一个问题。是否可以在面板折叠后删除文本并向面板 header 添加项目？

在代码下方，东面板是可折叠的。我想在折叠后删除文本并将项目添加到 header 中。

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        split: true,
        width: 150
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});

更新

在这种情况下，我将按钮添加到 header 但是当面板折叠时按钮消失了。当面板折叠时，有什么方法可以在 header 中显示或添加组件吗？

{        
    region: 'east',        
    title: 'East Panel',        
    collapsible: true,        
    split: true,        
    width: 150,
    header: {
         items: [{
            xtype: 'button'
        }, {
            xtype: 'button'
        }]
    }
}

这里是 fiddle

谢谢

Answer 1

您看到的折叠的 header 实际上是专门为此目的创建的 Ext.panel.Header 的另一个实例。我试图找到一些配置来自定义它，但是 Ext.panel.Panel 并不是在考虑它的情况下创建的。

所以你必须覆盖创建这个 reader 的方法，我发现它叫做 createReExpander。这是一个很大的方法，如果不重写很多东西就很难覆盖它，但它是可以做到的。

我尝试向 header 添加按钮，结果在视觉上并不好看，但至少它们被创建了！因此，如果您不需要按钮，我建议您使用 tools 而不是按钮。

Answer 2

请参考Ext.panel.Panelclass中的"placeholder"相关配置。以下是您从 fiddle 修改的代码。

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        collapseMode:'placeholder',// set collapseMode to placeholder
        split: true,
        width: 300,
        placeholder:{ // Try different components and layout configs
            width:100,
            items:[{
                xtype:'button',
                text:'Button 1'
            }]
        }
        /*header: {
            items: [{
                xtype: 'button'
            }, {
                xtype: 'button'
            }]
        }*/
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});

ExtJS 在面板折叠后删除文本并将项目添加到 header

ExtJS remove text and add items into header after the panel collapsed

javascript

css

extjs

extjs5