从 ExtJs 5 到 6. 简单的代码迁移

Question

我不知道为什么，但我在ExtJs 5 中工作的小代码现在在ExtJs 6 中不起作用。这是一个非常基本的代码，如下所示：

//TestApp/app.js

Ext.Loader.setConfig({enabled:true, disableCaching:true});
Ext.application({
    name:'TestApp',
    appFolder:'/TestApp',
    requires:['Ext.container.Viewport', 'Ext.layout.container.Border'],
    controllers:['TestAppController'],
    autoCreateViewport:true
});

============

//TestApp/view/Viewport.js

Ext.define('TestApp.view.Viewport',{
    extend:'Ext.container.Viewport',
    layout:'fit',
    initComponent:function(){
        Ext.apply(this,{
            layout:{
                type:'border'
            },
            items:[{
                region:'west',
                layout:'fit',
                width:500,
                collapsible:true,
                collapseMode:'mini',
                split:true,
                autoScroll:true
            },{
                region:'center',
                layout:'fit'
            }]
        });
        this.callParent(arguments);
    }
});

============

//TestApp/controller/TestAppController.js

Ext.define('TestApp.controller.TestAppControler',{
    extend:'Ext.app.Controller',
    init:function(){}
});

所以，当我运行我的应用程序时，我在控制台中看到，首先加载了 ExtJS css 库，然后是主 ext-all.js 文件，然后是 app.js，然后是 Viewport.js，最后是 TestAppControler.js .因此，库和所有应用程序源代码都已正常加载 - 我在控制台中清楚地看到它。但是，我在浏览器中看到的只是一个空白页面。我想，我错过了一些东西，一些特定于ExtJS 6 的代码（比如一些启动命令或类似的东西）。

Answer 1

这可能与autoCreateViewport 已被弃用有关，请尝试改用mainView。