关于extjs：动态管理Ext.app.Application.controllers

dynamically manage Ext.app.Application.controllers

目前，我们的团队正在评估使用 ExtJS 作为前端转换大型企业 Web 应用程序(一种 ERP 系统，600 个独特的屏幕)的可能性。该应用程序是基于我们的开源 eludia 引擎构建的

我们的引擎需要模型定义(当您编辑定义时它会变形数据库)，有某种控制器
(内容模块)和演示文稿(带有生成实际 js html 混合代码的演示模块)

就像这个帖子中的一些人一样，我们的团队有一个问题：

我们希望在服务器端拥有模型和视图，并将 JSON 数据发送到前端

目前 eludia 核心开发人员(=我的团队，我们同时维护这个应用程序和 eludia)已经完成了一些步骤，以使用 ExtJS 作为前端的变形引擎

我的团队正在考虑：

继续使用旧的内容模块作为服务器端代码
使用服务器端模型定义即时为 ExtJS 生成模型文件，
将 Presentation 模块转换为客户端 ExtJS 视图模块，并为每个屏幕编写客户端控制器
但是现在又多了一个问题：ExtJS 需要枚举 Ext.app.Application 中的所有控制器
每次一个人写新的/转换旧引擎的屏幕时，他都应该将它添加到这个列表中

Ext.app.Application.controllers ...可以动态生成吗？

因此这些问题按模糊程度排序：

你能说出任何使用 ExtJS 作为前端的足够大(600 个屏幕，最好是开源的)MVC/非 MVC 应用程序吗？
我们是否以正确的方式前进？

更新

我应该尽量缩小问题的范围

应用启动时不需要一次性加载所有控制器吗？

我想说的是，也许可以以更"动态"的方式加载控制器：

为打开的屏幕生成一个控制器js
将新的附加到 Ext.app.Application.controllers
每当用户做某事(点击链接、按钮等)时：需要新屏幕时

相关讨论

最好的办法是依赖 Ext.Loader，但不要使用上面建议的 loadScriptFile() 方法。

Ext 4 引入了一个类系统。其(许多)好处之一是 dep-tree，它允许您管理所有组件间依赖项并根据需要加载类。

这里是你如何初始化加载器

1
2
3

Ext.Loader.setPath('App','/js/app');
Ext.Loader.setPath('WidgetsLibrary','/js/widgets');
Ext.Loader.setConfig({enabled: true});

定义一个动态加载的控制器类：

1
2
3
4
5
6
7
8
9
10
11
12
13

Ext.define('App.controller.Menu', {
extend: 'Ext.app.Controller', // leave it as it is
models: ['Event','User'], // this assumes App.model.* prefix
stores: ['Options','Permissions'], // this assumes App.store.* prefix
views: ['menu.Bar','SmartButton'],// this assumes App.view.* prefix
requires: [
'App.whatever.other.class', // auto-load this class as a dependency
'WidgetsLibrary.*', // auto-load all classes in WidgetsLibrary
],

init: function(){}

// [...]

现在动态加载你的控制器类(一个模型)：

1
2
3
4
5
6
7
8
9

Ext.require(
'App.controller.Menu', // this auto-loads all dependencies
function(){
// ... as soon as this class
// and all its dependencies have loaded...
var controller = Ext.create('App.controller.Menu'); // create an instance
controller.init(); // launch init() method
}
);

奖励：通过使用类系统和加载器，您不必维护自己的控制器集合并检查控制器是否已加载。只需使用此处描述的 Ext.ClassManager.isCreated() 方法。

1
2
3
4
5

if(Ext.ClassManager.isCreated('App.controller.Menu')){
// ... controller has already been loaded and init ...
}else{
// we need to auto-load that controller using Ext.require()
}

更多阅读：

http://docs.sencha.com/ext-js/4-0/#!/guide/class_system
http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

按需使用控制器的最佳方式是动态加载它们并在需要时创建控制器实例。您还需要将控制器放在单独的 js 文件中，因此架构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//let's say you need to use controller User:
var controller = ControllerManager.get('User');//I believe you have some controller manager, similar to Sencha's Ext.ControllerManager
if(controller){
//use it here
}
else {
loadScript([url of your controller script], controllerLoaded);
}
...
function controllerLoaded(){
//create controller instance here if needed and use it then
}
...
function loadScript(url, callback){

var script = document.createElement("script")
script.type ="text/javascript";

if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState =="loaded" ||
script.readyState =="complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}

script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}

更新
为了将新控制器集成到已经运行的 Ext.app.Application 中，您需要扩展 Ext.app.Application 并添加以下方法：

1
2
3
4
5
6
7

addController: function(name){
//at this point your controller .js file should be already loaded into the DOM
var c = this.getController(name); //controller will be created automatically by name in this getter
//perform the same initialization steps as it would have during normal ExtJs process
c.init(this);
??.onLaunch(this);
}

顺便说一句，您可以使用 Ext.Loader:

的 ExtJs 内置方法，而不是使用自定义方法动态加载 javascript 文件

1
2
3
4
5
6
7
8
9
10

/**
* Load a script file, supports both asynchronous and synchronous approaches
*
* @param {String} url
* @param {Function} onLoad
* @param {Object} scope
* @param {Boolean} synchronous
* @private
*/
loadScriptFile: function(url, onLoad, onError, scope, synchronous)