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);        }    },

 

言归正传，还是那个问题，动态加载tab里的js模块文件，看了下面这个老兄的文章，解决了大问题。 

http://www.nnwnn.com/a/bianchengjiaocheng/2012/0920/17461.html 

首先“组织架构”页面的内容，我暂时采用官方的user demo代替，目录架构如下：

 

在组织架构页面的写法如下（没有整理，单独归档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            }        });    },

 

继续研究中....