Question

请帮帮我。我正在使用MVC创建一个TabPanel。在渲染面板添加选项卡时。这是两个视图和控制器的代码。结果是扭曲的画面。选项卡的标题被绘制两次：在顶部和底部（拉伸到全屏）。当我在控制器函数addNewTab（）中更改行＆＃34; tp.add（{xtype：＆＃39; mytab＆＃39;}）。show（）; ＆＃34; 到另一个＆＃34; tp.add（{title：＆＃39; new Tab＆＃39;，html：＆＃39; MVC New Tab Example＆＃39;}）。show（）; ＆＃34;，然后一切都正确呈现。我将非常感谢你的帮助。

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有效，因为您实际上是在添加xtype（Ext is panel使用的默认TabPanel），而MY.view.Tab正在为您创建标签你提供的标题。

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

Extjs 4 MVC TabPanel - 糟糕的渲染选项卡

1 个答案: