ExtJS 6.0 Viewport渲染空白页，疑似控制器问题求助

你的页面空白问题核心在于控制器没有关联或触发Viewport的实例化——哪怕Viewport类已经成功加载，ExtJS MVC应用也不会自动渲染它，必须明确告诉应用要创建这个视图实例。

具体原因 #

你的cMain控制器的views配置里只声明了Exemple.View和CorpsMetier.View，完全没有包含rgpd.view.Viewport。在ExtJS MVC模式中，控制器只会管理它views数组里列出的视图；而且应用默认不会自动实例化Viewport，你需要主动触发它的创建流程。

另外要注意：类加载和实例化渲染是两回事——类加载只是把代码解析到内存，只有调用Ext.create()或者通过应用视图管理机制触发实例化，才会在页面上渲染出可视化元素。

修复方案 #

你可以选择以下两种方式解决：

方案1：在控制器中关联并实例化Viewport

修改控制器的views数组，把Viewport加入其中，然后在onLaunch方法中主动创建实例：

Ext.define('rgpd.controller.cMain', {
    extend: 'Ext.app.Controller',
    models: [ 'mExemple', 'mCorpsMetier', 'mUtilisateur' ],
    stores: [ 'sExemple', 'sCorpsMetier', 'sUtilisateur' ],
    views: [ 
        'Exemple.View', 
        'CorpsMetier.View',
        'Viewport' // 也可以写完整类名'rgpd.view.Viewport'
    ],
    init: function() {
        this.control({ });
    },
    onLaunch: function() {
        // 实例化Viewport并渲染到页面
        Ext.create('rgpd.view.Viewport');
    },
});

方案2：在应用入口直接创建Viewport

如果Viewport是应用的主入口视图，更推荐在Ext.application的launch方法里直接实例化，这样不需要依赖控制器的视图配置：

Ext.application({
    name: 'rgpd',
    controllers: ['cMain'],
    launch: function() {
        // 直接创建Viewport，确保页面渲染
        Ext.create('rgpd.view.Viewport');
    }
});

额外检查点 #

• 确认应用入口文件（比如app.js）正确加载了控制器和Viewport类
• 再检查浏览器控制台有没有ExtJS相关的警告/报错（比如类路径错误、配置语法问题），虽然你说测试日志正常，但这类细节可能藏着隐性问题

内容的提问来源于stack exchange，提问作者RomAZE