在 ExtJS 4 中将组件插入到 Tabpanel 的选项卡中答案

【问题标题】：Insert Component into the Tabpanel's tab in ExtJS 4在 ExtJS 4 中将组件插入到 Tabpanel 的选项卡中
【发布时间】：2012-09-17 17:17:14
【问题描述】：

我想在 ExtJS 4 中使用包含我自己的组件（或 XTemplete）的大标签制作一个标签面板，有什么方法可以实现吗？谢谢

更新 : 可以通过这个链接改变自定义标签的高度

Change the Height of an ExtJS 4 Tab

【问题讨论】：

你能更具体一点你想要什么。默认情况下，选项卡是否应该始终包含 XTemplate？ ExtJS 有一个很棒的类系统，因此您可以从任何类继承来构建自己的类，或者在创建时简单地扩展一个。

标签： extjs extjs4 extjs4.1

【解决方案1】：

查看Ext.tab.Bar 和Ext.tab.Tab。您可以通过Ext.tab.Panel#tabBar config 属性将标签栏配置传递给面板。

var tabpanel = {
    xtype: 'tabpanel',
    tabBar: {
        defaultType: 'xxx'        
    }
}

然后您使用alias: 'widget.xxx 创建一个自定义组件类。默认的Ext.tab.Tab 是Ext.button.Button 的子类，具有自定义样式。

用不只是Ext.tab.Tab 的子类的组件替换它可能需要相当多的工作。您需要确保组件的行为正确，并且 CSS 样式看起来不错。

一种更快但不太灵活的方法是继承 Ext.tab.Tab 并更改其外观以满足您的需求。

更新

不幸的是，ExtJs 的Ext.tab.Panel 明确地为每个正在添加/创建的选项卡设置了 xtype。来自Ext.tab.Panel

onAdd: function(item, index) {
    var me = this,
        cfg = item.tabConfig || {},
        defaultConfig = {
            xtype: 'tab',                // <= XXX
            card: item,
            disabled: item.disabled,
            closable: item.closable,

但正如您所见，可以在选项卡面板的项目上添加tabConfig，这将优先于此处定义的 defaultConfig。因此，一种简单直接的方法是在选项卡面板的每个子项上定义一个 tabConfig

tabConfig: {
   xtype: 'xxx'
}

【讨论】：

嗨，但在 Ext JS 4 中设置 defaultType 时似乎没有变化
那很不幸。在检查了源代码后，我发现Ext.tab.Panel 实际上明确地为正在构建/添加的每个选项卡设置了xtype。我将更新我的答案以反映这一点。