0

请帮我。我正在使用 MVC 创建一个 TabPanel。在渲染面板添加选项卡时。这是两个视图和控制器的代码。结果是一张扭曲的图片。选项卡的标题被绘制了两次：在顶部和底部（拉伸到全屏）。当我在控制器函数 addNewTab() 中更改“ tp.add({xtype: 'mytab'}).show(); ”到另一个“ tp.add({title: 'new Tab', html: ' MVC 新标签示例'}).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
    }   
});
4

1 回答 1

1

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

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

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

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

于 2013-07-02T03:58:59.210 回答