我们知道Extjs4之后提出了MVC模块开发,将以前肥厚的js文件拆分成小的js模块[model\view\controller\store\form\data等],通过controller拼接黏合,提高了js代码的重用性,可阅读性,更加适合团队的开发。
js采用mvc后必定会带来一个问题,如何高效的加载各个js小文件?
官方的例子是统一采用了一个Ext.Application入口:
Ext.application({
name: 'WMS',
appFolder: 'ExtJs/App',
autoCreateViewport:true,
controllers: [ 'controller1','controller2','controller3'
],
launch: function() {
//
}
});
由于一个应用程序只有一个入口也就是一个application,这样会带来一个问题,我一个项目有众多的controller文件,需要在系统启动的时候加载所有的js文件,这明显不是我们想要的,我们想按需加载,在页面呈现的时候按需加载js各个模块文件。
看下面的框架例子,说的直白一点也就是我单击功能菜单树的“组织架构”,打开新的tab页面的时候,再加载所需要的js文件。
由于tab页面加载不是采用iframe的方式,这样就会带来更多的问题,毕竟他是和整个框架式一体的,需要考虑的问题不少。好处也很明显,不用每次都加载必备的Extjs库文件等。
//tab页面加载方法
NodeClick: function (view, record) {
if (record.data.leaf == true) {
var panel = Ext.getCmp(record.id);
if (!panel) {
panel = {
id: record.id,
closable: true,
title: record.data.text,
iconCls: record.data.iconCls,
autoScroll: true,
border: false,
layout: 'fit',
autoLoad: {//采用autoload方式
url: record.data.url,
scope: this,
scripts: true,
text: '页面加载中,请稍候....'
}
};
this.openTab(panel, record.id);
} else {
var main = Ext.getCmp("ViewPortCoreTab");
main.setActiveTab(panel);
}
}
},
openTab: function (panel, id) {
var o = (typeof panel == "string" ? panel : id || panel.id);
var main = Ext.getCmp("ViewPortCoreTab");
var tab = main.getComponent(o);
if (tab) {
main.setActiveTab(tab);
} else if (typeof panel != "string") {
panel.id = o;
var p = main.add(panel);
main.setActiveTab(p);
}
},
言归正传,还是那个问题,动态加载tab里的js模块文件,看了下面这个老兄的文章,解决了大问题。
http://www.nnwnn.com/a/bianchengjiaocheng/2012/0920/17461.html
首先“组织架构”页面的内容,我暂时采用官方的user demo代替,目录架构如下:
在组织架构页面的写法如下(没有整理,单独归档js)
@{
ViewBag.Title = "组织架构管理";
}
<script>
Ext.define('Module.UserModule', {
extend: 'Ext.app.Application',
id:"Org",
name: 'AM',
appFolder: '/ExtJs/App',
controllers: ["Users"],
launch: function () {
}
});
Ext.require("Module.UserModule", function () {
var app = Ext.create('Module.UserModule'); //需求创建user办理模块的app
Ext.onReady(function () { //必需要等user办理模块的app创建完成后才执行
var main = new Ext.Panel({
border: false,
layout: 'fit',
items: [{
xtype: 'userlist'
}]
});
//autoload方式,需要添加到tab,否则默认会是整个viewport,那就坏事喽
Global.ExtTabDoLayout(main);
});
});
</script>
好了,到目前为止,解决了按需加载js模块的方法。
但是新的问题又来了[ExtJs这玩意真的是很痛苦,几度放弃的边缘],引入了新的application后,页面的原始事件被刷新掉了,不管用了,估计是
init: function () {
this.control({//这里导致我整个框架的单击树节点的事件没有了(估计是this的问题)
'panel > userlist dataview': {
itemdblclick: this.editUser
},
'useredit button[action=save]': {
click: this.updateUser
}
});
},
继续研究中....
分享到:
相关推荐
中午的时候发了第一篇 Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块 ,发现实现上还是有问题,有很多理解不到位的地方,晚上详细解决下了,终于实现MVC各模块按需加载了,哈皮。 上篇文章中,关于...
js代码,实现了 extjs4.x tabpanel 动态加载panel和html的功能
Extjs3.x入门学习指南,还附带一些常用控件属性的详细描述和使用说明
自己项目中完整的基于extjs4.1的mvc框架,我把它从项目中剥离出来,无后端集成,可以直接运行index.html,样式主题可以自己引用ext4.1提供的theme,该框架基于自己封装的自定义的基于ext4mvc的公共组件,需要一定的...
Extjs4.1中文API.chm
demo描述: 1. 页面主框架是左是一个tree,右边是一个tablepanel 2. 左边的树是加载主页面的时候动态生成 3. 点击左边的树的节点动态加载... 注:需要自己导入Extjs 4.2.x 的文件,该demo是用Extjs 4.2.1 写的
Extjs 4.1 下拉框 Tree 的实现(mvc)
extjs4.1的中文文档,可以方便查看API
Extjs4.1 小例子(适合extjs初学者学习使用).直接导入myeclipse即可
Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing ...
ExtJs4.1 正式版,考虑到官网速度慢,放上来服务大家!
Extjs 4.1 (MVC) 如何动态加载控制层以及session 过期该如何处理
ExtJS4.1+MVC4+Spring.NET1.3+EF5 整合项目数据库(pdm、sql及sqlite数据库) 原文地址:http://blog.csdn.net/xz2001/article/details/8723266
帮大家整理整理一下 extjs3.x 官方大量示例 以及chm版api
ExtJS2.X 版本app 这个版本目前找不到了噢
extjs4.1 框架和文档 从官网下载的extjs-4.1.0-rc1
ExtJS3.x 中文帮助文档,是 CHM 格式的,方便阅读和查询。本人正在使用,效果不错,共享出来,方便大家。
Ext JS 4.X 中文API,不过有些地方不是很好,显示的有点慢!
Extjs 4.1中文版api,非常难得的一款4.1的中文api,值得大家收藏