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

复制代码 代码如下:

//动态加载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************/

复制代码 代码如下:

@{
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>