ExtJS視口產生空白頁

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'
        }
    }]
});

這是我的視口。 它已加載到我從“網絡控制台”選項卡檢查的瀏覽器中，我添加了console.log("test")調用，它出現了； 但瀏覽器上呈現空白頁面。 為什么呢 類定義的內容來自ExtJS文檔（我使用ExtJS 6.0）

我發現問題出在我的控制器上，但我不知道為什么

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

小提琴

完美運作。 問題是如何在父視圖中插入組件。 您創建實例並將其附加或在視圖中使用“ xtype”鏈接組件？ 提供更多代碼，我們將看到。