日期:2014-05-16 浏览次数:20398 次
原创作品:勿转载。
之前想通过创建多个application来实现动态加载模块。保留mvc模式。但是那样不是很好。改成动态加载controller来显示加载多模块,一个模块对应一个controller,
在controller中动态加载其他controller。
可以先参考之前的文章:
思路如下:
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);