当前位置: 代码迷 >> JavaScript >> Extjs创设多个application实现多模块MVC动态加载。
  详细解决方案

Extjs创设多个application实现多模块MVC动态加载。

热度:129   发布时间:2012-09-23 10:28:11.0
Extjs创建多个application实现多模块MVC动态加载。。

原创作品:勿转载。(这么做会有问题。。controller里面的control注册的事件会丢失。~~~先不这么弄了哦~)

java高级交流群:37341439   欢迎各位朋友一起交流。


这几天用extjs4.1做项目,有很多功能模块,使用mvc开发,系统有很多功能模块。如果用一个application进行开发,那么所有功能模块的js都得全部加载。。。。很恐怖。。

例如:

图片

Ext.Loader.setConfig({
    enabled : true
});
Ext.application({
    name: 'IV',
    appFolder: 'js/app',
    autoCreateViewport:true,
    controllers: [
       'config.ModuleController','config.user.UserController',''config.system.UserController''
    ],
    launch: function() {
        Ext.tip.QuickTipManager.init();
    }
});


说明:如图

config.ModuleController是主模块,(其实就是这个界面,主界面里面点击左边的按钮“用户管理”,“子系统管理”来操作各个子系统)

'config.user.UserController'是用户管理模块

‘config.system.UserController''是子系统管理模块。

如果这样做的话,那么页面一加载就得把这3个模块相关的js文件都加载进来,即使还没有点击“子系统管理模块”的按钮,但是子系统管理模块的相关js也会加载进来,比较占用资源(因为extjs会将controller里面配置的view和model和store的文件以及依赖都加载进来)


实现按需加载方法:


将以上的appication代码修改如下:

Ext.application({
    name: 'IV',
    appFolder: 'js/app',
    autoCreateViewport:true,
    controllers: [
       'config.ModuleController'
    ],
    launch: function() {
        Ext.tip.QuickTipManager.init();
    }
});

这样就只加载主系统相关的js


然后新建各个子系统的app目录:里面的目录结构也是 controller,view,model,store,

然后再点击左边按钮的时候,加载子系统的脚本如下(代码例子是加载用户管理子模块):

Ext.Loader.setPath('Module','js/module');
            Ext.require("Module.UserModule",function(){
                var app = Ext.create('Module.UserModule');          //需要创建user管理模块的app
                Ext.onReady(function(){                                 //必须要等user管理模块的app创建完成后才执行
                    var userPanel = center.child('userPanel');
                    if(!userPanel){
                        var userPanel =  Ext.widget('userPanel',{title:'系统设置>用户管理'});
                        center.add(userPanel);
                        center.setActiveTab(userPanel);
                    }else{
                        center.setActiveTab(userPanel);
                    }
                });
});

说明:

以上例子的'js/app'就是user管理模块的根目录。

用户管理模块采用的前缀都是UM,(主模块用的是IV)

js/module目录是放置user管理模块的application定义:如下:

Ext.define('Module.UserModule', {
    extend: 'Ext.app.Application',
    name: 'UM',
    appFolder: 'js/userApp',
    controllers: [
        "config.user.UserController"
    ],
    launch: function() {
    }
});


  Ext.require("Module.UserModule",function(){})加载了user管理模块的application。 reauire方法的第二个参数是加载完后的回调函数。

当加载完user管理模块的application定义以后需要 实例化该application。

var app = Ext.create('Module.UserModule');    

实例化后才会将application里面的依赖js给加载,不实例化的话,是不会加载依赖的。

然后需要在Ext.onReady()里面去执行接下来的操作。




  相关解决方案