ExtJS在面板折叠后删除文本并将其添加到标题中

问题描述：

我使用了Ext5，并且我有一个问题。面板折叠后，是否可以删除文本并将项目添加到面板标题中？ExtJS在面板折叠后删除文本并将其添加到标题中

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

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

UPDATE

在这种情况下，我添加按钮为标题但是当面板被折叠按钮消失。面板折叠时，是否有任何方法显示或添加组件到标题中？

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

这里是fiddle

感谢

http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.panel.Panel-cfg-placeholder – Yellen

你想添加什么样的项目？标题是否应该和现在一样？ –

嗨，Elias Medeiros。实际上，我更喜欢在面板折叠时将按钮添加到标题中。 –

答

请参阅Ext.panel.Panel类中的“占位符”相关配置。下面是你修改小提琴的代码。

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

答

你看到倒塌的头是实际上只是为此目的而创建的Ext.panel.Header另一个实例。我试图找到一些配置来定制它，但没有考虑到它。

所以你必须重写创建这个阅读器的方法，我发现它叫做createReExpander。这是一个很难覆盖而不必重写很多东西的大方法，但它可以完成。

我试着向页眉添加按钮，结果看起来不错，但至少它们是创建的！所以我建议你使用tools而不是按钮，如果你不需要文字的话。

ExtJS在面板折叠后删除文本并将其添加到标题中

相关推荐