javascript - ExtJS 在面板折叠后删除文本并将元素添加到标题中

Question

我使用 Ext5，我有一个问题。面板折叠后是否可以删除文本并将元素添加到面板标题中？

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

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

更新

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

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

这里是 fiddle

谢谢

Answer 1

请引用Ext.panel.Panel类中的“占位符”相关配置。以下是您修改后的 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'
        }
    }]
});