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，然后是{{1最后Viewport.js。因此，库和所有应用程序源代码都已加载好 - 我在控制台中清楚地看到它。但是，我在浏览器中看到的只是一个空白页面。我想，我会遗漏一些代码，这些代码特定于TestAppControler.js（就像某些启动命令或类似的东西）。

Answer 1

这可能与不推荐使用autoCreateViewport这一事实有关，请尝试使用mainView。

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

1 个答案: