如何更优雅的实现ExtJS的前端MVC模式下一个App多个Controller的动态加载

尊重原创，如需转载，请务必注明原文地址：http://www.cnblogs.com/Raoh/archive/2013/04/01/ExtJS_MVC_Controller.html

注：文中ExtJS主要指ExtJS 4.1版本，若有不当之处，烦请给予指正，谢谢！

最近有些朋友总是在问“怎么实现ExtJS的前端MVC模式下一个App多个Controller的动态加载”，也看了一些网友的实现，总的来说，我认为有必要跟大家分享一下我们目前的实现方法，所以，趁着中午休息的空闲，草拟了这篇随笔，跟大家一起探讨一下“如何更优雅的实现ExtJS的前端MVC模式下一个App多个Controller的动态加载”。

其实这也是得益于一位国外同行的启发，具体链接地址已无从找起，请勿见怪！

首先，说说为什么要引入多个Controller。

ExtJS的MVC模式下，Controller默认情况下会一次性将其配置的所有store、model、自定义Ext组件，在其初始化时，一起请求下来。

这样的实现，对于小型的项目来说，js文件较少，只使用一个Controller问题不大，但是对于大型项目来说，一次性请求那么多sotre、model、view，这是让人无法接受的！

所以，我们有必要将不同的功能、模块，封装到不同的Controller中，减少其同时请求的js数量，提高用户的体验。

接下来，我们来了解一下，ExtJS的MVC模式下Controller的加载过程。

Ext.create('Ext.app.Application',{    name:'XICTISD',    appFolder:'app',    views:['Viewport'],    controllers:['MainController','UserController','RoleController']});

先举一段代码为例，如上所示，给Ext.app.Application实例配置了三个Controller。

实际上，Ext.app.Application的构造函数中，会给它的实例添加一个属性：controllers，这是一个Ext.util.MixedCollection()实例，其源码如下：

me.controllers = new Ext.util.MixedCollection();

(注意：了解这一点细节，对我们后面很有帮助。)

紧接着，Ext.app.Application的构造函数中会遍历我们给这个实例配置的三个Controller，调用当前实例的getController方法，获取对应的Controler实例，并执行该Controller实例的init()方法，源码如下：

for (i = 0; i < ln; i++) {     controller = me.getController(controllers[i]);     controller.init(me);}

getControler方法负责返回一个Controller实例，如果参数中的Controller已经加载过，则直接取得该Controller实例并返回，如果参数中的Controller尚未加载过，则向后台发起一个请求，获取一个Controller实例，并将这个Controler实例添加到Ext.app.Application实例的controllers里，最终返回这个Controller实例，其源码如下：

getController: function(name) {        var controller = this.controllers.get(name);        if (!controller) {            controller = Ext.create(this.getModuleClassName(name, 'controller'), {                application: this,                id: name            });            this.controllers.add(controller);        }        return controller;}

到此，我们基本上清楚了Controller的加载过程，接下来，我们谈谈如何在一个App中动态加载多个Controller。
由于Ext.app.Application实例的controllers属性是个Ext.util.MixedCollection()实例，因此，我们可以为其添加一个事件监听，当有新的Controller被动态加载进来的时候，就执行这个Controller的init()方法，这能省去我们每次都手动去调用Controller的init()方法的工作，示例代码如下：

var application;Ext.Loader.setConfig({enabled:true});Ext.require('Ext.app.Application',function(){Ext.app.Application.addMembers({    //加载Controller后触发事件    newControllerAdded:function(idx,cntr){        cntr.init(this);    },    //判断是否已加载指定Controller，返回Boolean    hasController:function(name){        return !!this.controllers.get(name);    },    //加载并返回指定Controller    addController:function(name){        return this.getController(name);    }});});Ext.onReady(function(){ application=Ext.create('Ext.app.Application',{    name:'MyApp',    appFolder:'app',    views:['Viewport'],    controllers:['MainController'],    launch:function(){        Ext.tip.QuickTipManager.init();        this.controllers.addListener('add',this.newControllerAdded,this);        Ext.create('Ext.container.Viewport',{            layout:'border',            items:[{                xtype:'mainNorth'            },{                xtype:'mainSouth'            },{                xtype:'mainWest'            },{                xtype:'mainCenter'            }]        });            } });});

如上代码，我们顺便为Ext.app.Application扩展了两个方法：hasController、addController，为后续编写代码提供一些友好的支持，其具体用途可见代码中的注释。
接下来，我们就可以在需要的地方，进行动态加载Controller了，示例如下：

if(!app.hasController('SysController')){           app.addController('SysController');}

对于SysController中的store、model、view，只需保持原先的写法，不需要任何更改，在调用app.addController时，会自动加载。

再也不需要你去手工调用Controller的init()方法了，代码就这么简单！

注：本文讨论的话题仅仅是在一个app中如何动态加载多个Controller，而对于Controller中所包含的store、model、view等的动态加载，可能需要再另起一篇来进行讨论，大家有兴趣的话可以翻一下Ext.application.Controller源码中的getStore()、getModel()、getView()等方法的源码，也许能得到一些相应的提示和灵感！