日期:2014-05-16  浏览次数:20398 次

Extjs创建多个controller实现多模块MVC动态加载。。完美破解版

原创作品:勿转载。



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);