动态管理Ext.app.Application.controllers

Question

目前，我们的团队评估了将大型企业网络应用程序(类似于ERP系统，600+独特屏幕)转换为前端使用ExtJS的可能性。该应用程序是在我们的开源洗脱剂引擎上构建的。

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

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

我们希望服务器端有模型和视图，只需将JSON-数据发送到前端

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

我的团队正在考虑：

• 继续使用旧的内容模块作为服务器端代码
• 使用服务器端模型定义动态生成ExtJS的模型文件，
• 将表示模块转换为客户端ExtJS视图模块，并为每个屏幕编写客户端控制器，但现在还有一个问题:每当一个人从旧引擎写入/转换屏幕时，ExtJS需要枚举Ext.app.Application中的所有控制器，他应该将它添加到这个列表中。

可以Ext.app.Application.controllers ..。是动态生成的？

因此，由模糊性排列的这些问题：

• 你能说出任何足够大的(600+屏幕，更好的开源) MVC /非MVC应用程序，它使用ExtJS作为前端吗？
• 我们走的路对吗？

更新

我应该尽量缩小问题范围

在应用程序启动期间，不需要同时加载所有控制器？

我想说的是，也许以一种更“动态”的方式加载控制器是可能的：

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

Answer 1

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

//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并添加以下方法：

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文件。

/**
         * 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)

Answer 2

您最好的选择是依赖Ext.Loader，但是不像上面建议的那样使用loadScriptFile()方法。

Ext 4介绍了一个类系统。其中一个好处是dep树，它允许您根据需要管理所有组件间依赖关系和加载类。

下面是初始化加载程序的方法

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

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

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(){}

 // [...]

现在要动载您的控制器类(一个模型)：

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() 这里描述的方法即可。

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()
}

更多阅读：

• 系统
• 建筑

Answer 3

我们刚刚用我们的网络应用程序完成了这个过程。~250个屏幕。是的，我们动态地加载控制器。

使用Ext.JS构建屏幕的时间比使用YUI快约400%，而YUI是我们以前的平台。不错的一点是，我们可以保留efficiency对象，它比Ext.JS版本工作效率更高。

我们有一个App来管理Ext.JS控制器的加载和初始化。在这里，我们使用代码中唯一的其他YUI类，即YUI.get (YUI.get.script)。只需确保在同一会话中不加载控制器两次。

我假设您希望动态加载这些控制器来加载时间(这也是我们最初遇到的问题)。扩展，扩展，扩展。

Ext.define('namespace.classname', {
{
    extend: 'Ext.form.panel',
    // your code here
}

这将降低您的整体代码下载，并加快初始化。