Extjs4.1.x使用Application动态按需加载MVC各模块

我们知道Extjs4之后提出了MVC模块开发，将以前肥厚的js文件拆分成小的js模块[model\view\controller\store\form\data等]，通过controller拼接黏合，提高了js代码的重用性，可阅读性，更加适合团队的开发。

js采用mvc后必定会带来一个问题，如何高效的加载各个js小文件？(源码)

官方的例子是统一采用了一个Ext.Application入口：

Ext.application({  
        name: 'WMS',  
        appFolder: 'ExtJs/App',  
        autoCreateViewport:true,  
        controllers: [       'controller1','controller2','controller3' 
        ],  
        launch: function() {  
               //  
        }  
    });

由于一个应用程序只有一个入口也就是一个application，这样会带来一个问题，我一个项目有众多的controller文件，需要在系统启动的时候加载所有的js文件，这明显不是我们想要的，我们想按需加载，在页面呈现的时候按需加载js各个模块文件。

看下面的框架例子，说的直白一点也就是我单击功能菜单树的“组织架构”，打开新的tab页面的时候，再加载所需要的js文件。

由于tab页面加载不是采用iframe的方式，这样就会带来更多的问题，毕竟他是和整个框架式一体的，需要考虑的问题不少。好处也很明显，不用每次都加载必备的Extjs库文件等。

//tab页面加载方法  
    NodeClick: function (view, record) {  
            if (record.data.leaf == true) {  
                var panel = Ext.getCmp(record.id);  
                if (!panel) {  
                    panel = {  
                        id: record.id,  
                        closable: true,  
                        title: record.data.text,  
                        iconCls: record.data.iconCls,  
                        autoScroll: true,  
                        border: false,  
                        layout: 'fit',  
                        autoLoad: {//采用autoload方式  
                            url: record.data.url,  
                            scope: this,  
                            scripts: true,  
                            text: '页面加载中，请稍候....' 
                        }  
                    };  
                    this.openTab(panel, record.id);  
                } else {  
                    var main = Ext.getCmp("ViewPortCoreTab");  
                    main.setActiveTab(panel);  
                }  
            }  
        },  
        openTab: function (panel, id) {  
            var o = (typeof panel == "string" ? panel : id || panel.id);  
            var main = Ext.getCmp("ViewPortCoreTab");  
            var tab = main.getComponent(o);  
            if (tab) {  
                main.setActiveTab(tab);  
            } else if (typeof panel != "string") {  
                panel.id = o;  
                var p = main.add(panel);  
                main.setActiveTab(p);  
            }  
        },

在组织架构页面的写法如下（没有整理，单独归档js）

@{  
        ViewBag.Title = "组织架构管理";  
    }  
     
    <script>  
        Ext.define('Module.UserModule', {  
            extend: 'Ext.app.Application',  
            id:"Org",  
            name: 'AM',  
            appFolder: '/ExtJs/App',  
            controllers: ["Users"],  
            launch: function () {  
            }  
        });  
        Ext.require("Module.UserModule", function () {  
            var app = Ext.create('Module.UserModule');          //需求创建user办理模块的app  
            Ext.onReady(function () {                                 //必需要等user办理模块的app创建完成后才执行  
                var main = new Ext.Panel({  
                    border: false,  
                    layout: 'fit',  
                    items: [{  
                        xtype: 'userlist' 
                    }]  
                });  
                //autoload方式，需要添加到tab，否则默认会是整个viewport，那就坏事喽  
                Global.ExtTabDoLayout(main);  
            });  
        });  
    </script>

好了，到目前为止，解决了按需加载js模块的方法。

但是新的问题又来了[ExtJs这玩意真的是很痛苦，几度放弃的边缘]，引入了新的application后，页面的原始事件被刷新掉了，不管用了，估计是

init: function () {  
            this.control({//这里导致我整个框架的单击树节点的事件没有了（估计是this的问题）  
                'panel > userlist dataview': {  
                    itemdblclick: this.editUser  
                },  
                'useredit button[action=save]': {  
                    click: this.updateUser  
                }  
            });  
        },

上一篇发现实现上还是有问题，有很多理解不到位的地方，晚上详细解决下了，终于实现MVC各模块按需加载了，哈皮。

上篇文章中，关于ExtJs这个玩意的评论就跟java和.Net那个好一样，既然上了贼船，就难下了，而且对于企业级的应用我个人觉得Extjs框架还是不错的，尤其是没有UI设计的团队（苦逼的程序员就兼UI吧），起码难得发现一个做的比较好的UI框架（国产的miniUI貌似看的过去，其他的就有点扯淡了[什么EasyUI、Dojo、 JqueryUI等等]），2年前选择了Extjs2.0之后收费了，停了一段时间，后面做了比较久的Ext.Net（主要是开发效率高），现在还是转回了ExtJs4，又到了起点，悲吹....干吧！

扯远了，回归正题：中午的时候碰到一个问题，控件的事件被注销了，思索了下考虑是application重新创建覆盖主框架的问题，那么也就是说整个系统只能采用一个application，那么如何动态的加载controller呢？只要动态的加载了controller，其他的view、 store等都会被一次加载。 

首先我们需要定义一个公共方法让application加载controller，

//动态加载js模块，****重要  
    var application;  
    Ext.Loader.setConfig({ enabled: true });  
    Ext.require([  
        'Ext.app.Application',  
        'Ext.app.Controller' 
    ]);  
    Ext.app.Controller.implement({  
        //MVC 加载模型  
        loadModel: function () { },  
        //MVC 加载视图  
        loadView: function () { },  
        getApplication: function () {  
            return this.application;  
        }  
    });  
    Ext.app.Application.implement({  
        //MVC 加载控制器  param {String/Array} controllers  
        loadModule: function (controllers) {  
            var me = this;  
            var controllers = Ext.Array.from(controllers), ln = controllers.length, i, controller;  
            for (i = 0; i < ln; i++) {  
                var name = controllers[i];  
                if (!this.controllers.containsKey(name)) {  
                    controller = Ext.create(  
                            this.getModuleClassName(name, 'controller'), {  
                                application: this,  
                                id: name  
                            });  
                    this.controllers.add(controller);  
                    // 优先加载模型  
                    controller.loadModel();  
                    controller.init(this);  
                    controller.onLaunch(this);  
                    //动态构建视图 & 绑定模型数据  
                    controller.loadView();  
                }  
            }  
        }  
    });  
    /*****END************/

当我们单击功能节点树的"组织架构"的时候,开始加载Controller的Org.js，是的只需要加载这一个就可以了，其他的他会自动加载，也是MVC的优点：

@{  
        ViewBag.Title = "组织架构管理";  
    }  
     
    <script>  
        /*      
        写法一:  
        application.loadModule("Users");  
        //var module = application.getController("Users");     
        //var viewName = module.views[1];  
        //alert(viewName);  
        //var view = module.getView("user.List");或者是viewName  
        //var panel = view.create();  
        //Global.ExtTabDoLayout(panel);  
     
        写法二:  
        var main = new Ext.Panel({  
            border: false,  
            layout: 'fit',  
            items: [{  
                xtype: 'userlist'  
            }]  
        });  
        Global.ExtTabDoLayout(main);  
     
        */ 
     
        application.loadModule("Org");  
        var main = new Ext.Panel({  
            border: false,  
            layout: 'border',  
            items: [{ xtype: 'OrgTree' }, { xtype: 'OrgUserGrid' }]  
        });  
       //添加到tab里  
        Global.ExtTabDoLayout(main);  
    </script>

这样整个组织架构的页面搭建就实现了，而且是按需加载本模块的，各个事件不会冲突。

具体的代码太多了见附件。

这还没开始写业务逻辑呢，就这么蛋疼了写了这一堆的js文件，看来整个架构完成，哥哥我非死即伤( ⊙o⊙ )哇...............