如何更优雅的实现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()等方法的源码，也许能得到一些相应的提示和灵感！
