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.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()里面去执行接下来的操作。
转载于:https://www.cnblogs.com/webu/archive/2012/10/08/2715834.html
Extjs创建多个application实现多模块MVC动态加载。。相关推荐
- Linux 2.6内核的编译步骤及模块的动态加载
本文是基于2.6的内核,也建议各位可以先看一下<Linux内核设计与实现(第二版)>作为一个基础知识的铺垫.当然,从实践角度来看,只要按着以下的步骤去做也应该可以实现成功编译内核及加载模块 ...
- linux系统把驱动编译成.ko模块 insmod动态加载
介绍: Linux 驱动有两种运行方式,第一种就是将驱动编译进 Linux 内核中,这样当 Linux 内核启动的时候就会自动运行驱动程序.第二种就是将驱动编译成模块(Linux 下模块扩展名为.ko ...
- Android动态加载黑科技 动态创建Activity模式
基本信息 Author:kaedea GitHub:android-dynamical-loading 代理Activity模式的限制 还记得我们在代理Activity模式里谈到启动插件APK里的Ac ...
- 【游戏逆向】FPS游戏自瞄透视模块动态加载分析
用OD附加游戏进程, 进入OD主界面以后,我们CTRL+G 跳转到地址00401000(系统默认通常游戏领空的起始地址)的时候发现了错误. 也就是说代码段不在这了, 那跑哪去了? 为什么会有这样的错误 ...
- react 动态修改路由_升级到 React Router 4 并实现动态加载和模块热替换
这篇文章是升级到Webpack2坑--模块热替换失效页面不自动刷新?的后续.那篇文章主要说明了,升级到 Webpack 2 之后,通过升级webpack-dev-server和react-hot-lo ...
- [driver]linux内核动态加载模块
问题: 1. 把编译好的模块放到板子/lib/modules对应文件夹下,并且执行了depmod -a, 比如pl2303.ko, 那么下一次插入pl2303的串口线,是否可以识别,也就是自动加载pl ...
- OrchardCore 如何动态加载模块?
[导读]今天,我们再次讨论下OrchardCore,通过初期调研,我们项目采用OrchardCore底层设施支持模块化,同时根据业务场景,额外还需支持二次开发,于是有了本文,若有不同解决方案,欢迎留言 ...
- Node模块引入与加载机制
Node模块引入与加载机制 引入模块 Node.js 提供了 exports 和 require 两个对象,其中 exports 是模块公开的接口,require 用于从外部获取一个模块的接口,即所获 ...
- BCB(C++ Builder)创建动态库(DLL,接口导出和调用),动态加载DLL
以前没有封装dll动态库,接触新的工作之后需要用,折腾了一整天,终于搞定了 毕竟是生手,就简单分析注意点和遇到的一些问题及解决方案: (1)首先准备要生成DLL的工程. (1.1)我用的是BCB(C+ ...
最新文章
- 17张图揭密支付宝系统架构
- 中国人工智能产业发展联盟成立 360任副理事长单位
- JQuery AJAX请求结果的null为key时无法进入success方法
- css毛玻璃效果白边_css3毛玻璃效果白边问题_html/css_WEB-ITnose
- flask mysql项目模板渲染_Flask系列(二) 模板 templates
- fisher线性判别算法python_Fisher线性判别(LDA)python实现
- [六字真言]1.唵.遁入佛门之异常.md
- 微课|玩转Python轻松过二级(2.2.4节):位运算符与集合运算符
- c#获取本地ip地址网关子网掩码_这样解释IP地址、子网掩码、网关之间的联系,不会技术也能听懂...
- 深度剖析 | 基于大数据架构的BI应用
- Shell脚本学习-阶段九-数据库被攻击恢复
- Camera--V4L2驱动学习记录
- PHP学习笔记三(数组API)
- CiscoCUCM配置网关协议
- selenium3降级到selenium2详细步骤
- smipleChart 简单图表类 javascript
- 在ubuntu16.04下利用cmake+VC code,断点调试
- 《Blender图解教程:新手入门练习》
- 腾讯邮件服务器备份,怎样使用邮件备份功能?
- Android win10 平板 省电,Win10平板模式省电吗?如何设置?
热门文章
- linux中apache服务器的搭建与配置
- 通过讲课来建立自己的知识系统
- java guava 使用_使用Guava操作基本类型
- synchronized 异常_Java:synchronized的深度解析
- linux系统硬盘数量,Linux ext4文件系统划分磁盘inode数量
- Vue之条件渲染v-if和v-show
- Python机器学习:多项式回归与模型泛化009LASSO回归
- 手绘线条图画机器人_怎么把照片转换成手绘图画?怎么加水印?
- 算法提高 质因数2(java)
- android 7.0 黑屏,Android app启动是出现白屏或者黑屏如何解决?