ExtJS4 MVC 延迟加载答案

【问题标题】：ExtJS4 MVC Lazy LoadingExtJS4 MVC 延迟加载
【发布时间】：2013-05-24 19:01:20
【问题描述】：

帮助！我有一个 ExtJS 4.2 MVC 应用程序，它将包含多种不同的视图。但是，每个用户只能访问整个集合的一小部分。显然我不想为每个用户加载所有视图！此外，每个“允许”视图都应在用户登录后加载。

过去（在 MVC 之前）我使用 Ext.create() 来动态加载我的 .js 类文件。但是，我正在尝试使用 MVC 设计模式，而我在网上阅读的所有内容都表明这似乎是 ExtJS 4.2 MVC 的限制。这是真的？以下是我迄今为止尝试过的。

一、自定义视图定义（一个基本的容器示例）：

Ext.define('My.custom.TestView', {
    extend: 'Ext.container.Container',
    alias: 'widget.myCustomTestView',
    html: 'Test',

    initComponent: function() {
        this.callParent(arguments);
    }
});

其次，试图加载/实例化自定义视图的控制器定义：

Ext.define('My.custom.TestController', {
    extend: 'Ext.app.Controller',

    // Empty array because I want to
    // add views during run-time.
    views: [
    ],

    init: function () {
        // Attempt #1: This produces an error.
        this.getView('My.custom.TestView').create();

        // Attempt #2: This returns null.
        Ext.widget('myCustomTestView');

        // Attempt #3: This appears it might work, but it's ugly!
        Ext.create('My.custom.TestView');
        this.getView('My.custom.TestView').create();
    }
});

虽然#3 是唯一一个不出错的，但它对我来说并不正确。有什么建议/cmets？

【问题讨论】：

标签： javascript html model-view-controller lazy-loading extjs4.2

【解决方案1】：

Ext.create() 会导致同步加载，因此它实际上会检查您的视图的依赖 js 文件是否已加载，如果未加载，则它会同步加载 js 文件并停止执行你的代码，直到 js 被 Ext.Loader 加载和初始化。然后您可以在该类上 getView().create()，因为您的视图类现在在 Ext 中可用。

对于其他两个：

会产生一个错误，因为它基于 My.custom.TestView 已经被加载，但它不是，所以它无法在它加载的内容中找到类的定义以创建一个它的实例。
返回 null 很可能是因为 Ext.widget 的实现方式，以保持对 Ext.widget() 的调用，该调用指定尚未加载的类的小部件名称，以免中断你的应用。

1 和 2 都与 Ext.create() 不同，因为它们不调用 Ext.Loader 来解析类文件并在未找到已加载的情况下加载它内部进入分机。它们只是作用于已经加载并且在调用它们时在您的应用程序中可用的代码。

值得在此处阅读 Exts 文档中的 Ext.Loader http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Loader

【讨论】：