快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

下载和记娱乐app:Extjs创建多个application实现多模块MVC静态加载实例



这几天用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.syst下载和记娱乐appem.UserController''

],launch: function() {

Ext.tip.QuickTipManager.init();}

});

阐发:如图

config.ModuleController是主模块,(着实便是这个界面,主界面外貌点击左边的按钮“用户解决”,“子零散解决”来操纵各个子零散)

'config.user.UserController'是用户解决模块

‘config.system.UserController''是子零散解决模块。

假设这样做的话,那下载和记娱乐app么页面一加载就得把这3个模块关连的js文件都加载出去,纵然还没有点击“子零散解决模块”下载和记娱乐app的按钮,然而子零散解决模块的关连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.setActiveT下载和记娱乐appab(userPanel);

}else{center.setActiveTab(userPanel);

}});

});

阐发:

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。下载和记娱乐app reauire措施的第二个参数是加载完后的回调函数。

当加载完user解决模块的application定义今后需求 实例化该application。

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

实例化后才会将application外貌的依附js给加载,不实例化的话,是不会加载依附的。

而后需求在Ext.onReady()外貌去履行接上去的操纵。

您可能还会对下面的文章感兴趣: