Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块完美实现

中午的时候发了第一篇 extjs4.1.x 框架搭建 采用application动态按需加载mvc各模块 ，发现实现上还是有问题，有很多理解不到位的地方，晚上详细解决下了，终于实现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************/

ok,看整个的"组织架构的"js结构如下(真的是很多,真的是很蛋疼):
 
当我们单击功能节点树的"组织架构"的时候,开始加载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⊙ )哇