javascript - ExtJS视口(viewport)产生空白页面

Question

Ext.define('rgpd.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        border: false,
        margin: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 150
        // could use a TreePanel or AccordionLayout for navigational items
    }, {
        region: 'south',
        title: 'South Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        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'
        }
    }]
});

这是我的视口(viewport)。它已加载到我从网络控制台选项卡检查的浏览器中，我添加了一个 console.log("test") 调用，它出现了；但浏览器上会呈现一个空白页面。为什么 ？类定义的内容来自ExtJS文档(我使用ExtJS 6.0)

我发现问题出在我的 Controller 上，但我不知道为什么

Ext.define('rgpd.controller.cMain', {
    extend: 'Ext.app.Controller',
    models: [
        'mExemple',
        'mCorpsMetier',
        'mUtilisateur'
    ],
    stores: [
        'sExemple',
        'sCorpsMetier',
        'sUtilisateur'
    ],
    views: [
        'Exemple.View',
        'CorpsMetier.View'
    ],
    init: function() {
        this.control({
        });
    },
    onLaunch: function() {
    },
});

Answer 1

Fiddle

工作完美。问题是如何在父 View 中插入组件。您创建实例并附加它或在您的 View 中使用“xtype”链接组件？提供更多代码，我们将会看到。