Question

我们使用Ext JS MVC作为插件/主机架构的前端技术，其中存在一个主机，并且可以通过xcopy轻松安装许多插件。每个插件都有一个Ext JS应用程序，每个插件都在页面的负载上注册。整个申请是Single Page Application (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文件，并且它们不会进入其层次结构来加载其商店，视图和模型。我们测试过了。

另一方面，我们在Ext JS上找不到getController()和ControllerManager。似乎他们已经在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);
        }
    }
});

Answer 2

您是否尝试过Ext.create（）？

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext-method-create

此方法将动态加载.js文件，它似乎运行良好。但是，似乎应该有一种更清洁的方法来做到这一点。

Answer 3

至少在4.2.0中，这是可用的。来自Architecting Your App教程......

在较大的应用程序中，您可能希望在运行时加载其他控制器。您可以使用getController方法执行此操作。在运行时加载其他控制器时，必须记住手动在加载的控制器上调用init方法。

someAction: function() {
  var controller = this.getController('AnotherController');

  // Remember to call the init method manually
  controller.init();
}

Here is a link到Ext.app.Application的此功能的文档。

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

3 个答案: