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⊙ )哇...............