6

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

我们现在遇到的主要问题是，我们安装了 10 多个插件，每个插件至少有 10 个控制器，以及 50 多个视图、存储和模型。因此，当我们刷新页面 (F5) 时，我们应该坐下来等待近 30 秒，以便接近 200 个 HTTP 请求的内容到达服务器，并返回接近 3 MB 的响应。

尽管已经应用了缓存，但这根本不是可取的。甚至不是第一次。我想即使是外行也会接受这样的论点，即要得到一些牛奶，你不应该等到农场、奶牛、谷仓、房屋、道路、电力、河流等建成。

这个问题的明确答案必须是延迟加载控制器、视图、存储和模型。然而，我们并没有清楚地知道我们必须做什么才能做到这一点，我们也无法在网络上找到一个好的、适用的答案。大多数讨论只是关于延迟加载的要求，但没有提到如何。例如看这个链接：

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 并动态加载控制器）。即使是文档齐全的文章或带有代码示例的论坛讨论也可以帮助我们。

4

3 回答 3

3

对于您的问题，您应该使用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);
        }
    }
});
于 2013-02-25T13:32:01.907 回答
1

你试过 Ext.create() 吗？

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

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

于 2013-05-24T19:13:29.617 回答
0

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

在较大的应用程序中，您可能希望在运行时加载其他控制器。您可以使用 getController 方法来做到这一点。当您在运行时加载其他控制器时，您必须记住手动调用加载的控制器上的 init 方法。

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

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

这是 .的此功能的文档链接Ext.app.Application。

于 2014-03-09T02:56:38.053 回答