Extjs 4 MVC TabPanel - 错误的渲染选项卡

Question

请帮帮我。我正在使用 MVC 创建一个 TabPanel。在渲染面板添加选项卡时。这是两个视图和控制器的代码。结果是一张扭曲的图片。 选项卡的标题被绘制了两次：在顶部和底部（拉伸到全屏）。当我更改控制器功能 addNewTab() 行“tp.add({xtype: 'mytab'}).show();” 到另一个“tp.add({title: 'new Tab', html: 'MVC New Tab Example'}).show();”，那么一切都是正确渲染。我将不胜感激。

Views:
Ext.define('MY.view.Tab', {
    extend: 'Ext.tab.Tab',
    alias: 'widget.mytab',
    initComponent: function() {
        this.title = 'new Tab';
        this.html = 'MVC New Tab Example';
        this.callParent(arguments);
    }
});

Ext.define('MY.view.TabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.mytabpanel',
    initComponent: function() {
        this.id = 'MYTabPanel';
        this.callParent(arguments);
    }
});


Controller:
Ext.define('MY.controller.TabPanel', {
    extend: 'Ext.app.Controller',
    requires: ['MY.view.Tab'],
    init: function() {
        this.control({
            '#MYTabPanel': {
                render: this.addNewTab
            }
        });
    },
    addNewTab: function(tp) {
        tp.add({xtype: 'mytab'}).show();  //it work bad
        //tp.add({title: 'new Tab', html: 'MVC New Tab Example'}).show();  //it work good
    }   
});

Answer 1

您的mytab 类扩展了Ext.tab.Tab。这意味着这个代码tp.add({xtype: 'mytab'}); 正在添加Tab 作为TabPanel 的主视图。系统会为您添加到选项卡面板的每个面板或容器自动创建一个选项卡，该选项卡仅由视图顶部的按钮状组件组成。

这意味着当您调用上面的代码时，会创建一个 Tab 并将其作为视图推送到 TabPanel 中，然后 TabPanel 使用相同的标题创建另一个 Tab 并将其附加到您刚刚添加的Tab 的顶部。

此代码tp.add({title: 'new Tab', html: 'MVC New Tab Example'})' 有效，因为您实际上是在添加panel（Ext 使用的默认xtype 是面板）并且TabPanel 正在使用您提供的标题为您创建选项卡。

修复：使MY.view.Tab 扩展Panel 而不是Tab。如果您尝试仅为特定视图自定义选项卡，请深入了解 Ext.tab.Panel 的源代码并查看您可以添加到 TabPanel 项目的未记录的 tagConfig 属性。