我应该如何延迟加载Ext JS MVC控制器,视图,存储和模型？

Question

我们使用Ext JS MVC作为插件/主机架构的前端技术,其中存在一个主机,并且可以通过xcopy轻松安装许多插件.每个插件都有一个Ext JS应用程序,每个插件都在页面的负载上注册.整个应用程序是单页面应用程序(SPA).

我们现在遇到的主要问题是,我们安装了10多个插件,每个插件至少有10个控制器,以及超过50个视图,存储和模型.因此,当我们刷新页面(F5)时,我们应该等待将近30秒,以便接近200个HTTP请求的内容到达服务器,并且接近3兆字节的响应.

虽然已经应用了缓存,但这根本不可取.甚至没有第一次.我想即使是一个外行人也会接受这种说法,即要获得一些牛奶,你不应该等到农场,奶牛,谷仓,房屋,道路,电力,河流等建成.

这个问题的明确答案必须是延迟加载控制器,视图,商店和模型.但是,我们没有清楚了解我们要做些什么来做到这一点,我们无法在网上找到一个好的,适用的答案.大多数讨论只涉及延迟加载的要求,但他们没有提到如何.看一下这个链接,例如:

http://www.sencha.com/forum/showthread.php?130449-Large-Single-Page-Architecture-in-ExtJS-4.0

或者这个:

http://www.sencha.com/forum/archive/index.php/t-156694.html?s=aaeec1ce30acbc9cbd2615afadec982f

如果我们使用Ext.require方法,那么我们只将控制器加载为简单的JavaScript文件,并且它们不会进入其层次结构来加载它们的存储,视图和模型.我们测试过了.

在另一方面,我们不能找到getController()与ControllerManager上Ext JS的.似乎他们已经在Ext JS 4.1.3上消失了.

关于如何根据URL参数动态加载控制器的任何想法(我们可能需要一个路由引擎来动态解析URL和加载控制器).即使是一篇文档齐全的文章或论坛讨论代码示例也可以帮助我们.

Answer 1

对于您的问题，您应该使用Ext.require在菜单单击等事件上加载控制器文件。之后你应该初始化你的控制器。

我阅读了 ExtJs 源代码并在下面实现了自定义延迟加载控制器。

// this should run first time your application start
Ext.application({
    name: 'AppName',
    appProperty: 'appProp'
});

// below lines should run when you want to load controllers
// (for ex on menuitemclick)
var controllers = ['yourController', 'anotherController'];

Ext.require(controllers, function () {
    for (i = 0; i < controllers.length; i++) {
        var controllerName = controllers[i].substr(controllers[i].lastIndexOf(".") + 1);
        if (!AppName.appProp.controllers.get(controllerName)) {
            var controller = Ext.create(controllers[i], {
                application: AppName.appProp,
                id: controllerName
            });
            controller.init(AppName.appProp);
        }
    }
});