原创作品：勿转载。
java高级交流群：37341439 欢迎各位朋友一起交流。
之前想通过创建多个application来实现动态加载模块。保留mvc模式。但是那样不是很好。改成动态加载controller来显示加载多模块，一个模块对应一个controller，
在controller中动态加载其他controller。
可以先参考之前的文章：
Extjs创建多个application实现多模块MVC动态加载。。
传送门：http://blog.csdn.net/jiushuai/article/details/8000365
思路如下：
moduleController中动态创建userController和roleController，userController和rolecontroller保留mvc模式管理各自对应模块的组件（当然userController和roleController也可以动态创建其子模块。）
我的moduleController其实就是最外层的border模块，moduleController里面的菜单是左边的菜单“用户管理”，“子系统管理”等，当点击用户管理按钮或者子系统管理按钮的时候，动态加载改模块对应的controller。现在的代码和图片没有对应上，因为现在代码比较新，用的是旧图，原理是一样的。如下图
修改步骤：
1：首先将
Ext.application({
name: 'IV',
appFolder: 'js/app',
autoCreateViewport:true,
controllers: [
'config.ModuleController','config.user.UserController',''config.system.UserController''
],
launch: function() {
Ext.tip.QuickTipManager.init();
}
});
改为：
var application = new Ext.app.Application({
name: 'IV',
appFolder: 'js/apps/mainApp',
autoCreateViewport:true,
// requires:['Module.SubSystemModule','Module.UserModule'],
controllers: [
// 'config.ModuleController','config.user.UserController'
'ModuleController'
],
launch: function() {
//Ext.Msg.alert('1','323333333');
Ext.tip.QuickTipManager.init();
}
});
说明：将application定义到外面。方便controller引用。（也可以不用定义到外面，因为controller里面的init方法能拿到applicaiton的引用）
然后：在moduleController里面的按钮菜单点击处理函数里面代码如下：
onSelectionChange: function(thisview, record, eOpts){
var self = this;
var selected = record;
if(selected.get('module') =='userModule'){
Ext.require("IV.controller.UserController",function(){
var userController = application.getController('UserController');
userController.init(application);
},self);
}else if(selected.get('module') =='roleModule'){
Ext.require("IV.controller.RoleController",function(){
var roleController = application.getController('RoleController');
roleController.init(application);
},self);
}
}
注意
Ext.require("IV.controller.UserController",function(){
var userController = application.getController('UserController');
userController.init(application);
},self);
先加载userController。然后再加载完成后，通过application的getController方法实例化UserController，并注册UserController到application中。然后手动调用该controller的init方法。因为你是动态加载该controller的，如果这里不执行init方法将application传过去的话，controller里面的init方法是不会自动执行的。application的源码里面也是这么干的。。so我也这么干。
2：然后：
在我的userController里面的init方法如下：
init: function(app) {
this.control({
'userGrid': {
'itemclick':this.gridItemClickFun
}
});
var center = app.getController('ModuleController').getCenter();
var userPanel = center.child('userPanel');
if(!userPanel){
var userPanel = Ext.widget('userPanel',{title:'系统设置>用户管理'});
center.add(userPanel);
center.setActiveTab(userPanel);
}else{
center.setActiveTab(userPanel);
}
},
我需要通过application来获得moduleController的引用，并根据moduleController来获得里面的center组件（一个tabPanel）。然后将UserController对应模块里面的UserPanel添加到center组件的tab中。（这个userPanel就类似于moduleController中的viewPort，userPanel以及其里面的子元素，都可以遵循mvc模式在userController里面进行管理了。）。之后userController里面的代码逻辑就照正常MVC逻辑走。
示例代码下载地址：
http://download.csdn.net/detail/jiushuai/4768677