Extjs4以前的版本没有动态加载类的方式，这样开发程序的时候加载很多的js会导致加载变慢，由于本人一直使用extjs3的版本进行开发，于是简单实现了一个动态加载类的管理器，使用方式与extjs4的方式有些类似，在每一个类中需要使用其他类的时候像java一样先improt再使用。先看使用方式：
Ext.setPath("ThinkOA", "app");//将命名空间ThinkOA映射成webContent下的app文件夹,这样凡ThinkOA的命名空间的类都会去app目录下加载
Ext.setPath("Ext.ux", "resources/ux");//将命名空间Ext.ux映射成webContent下的resources/ux文件夹路径,这样凡Ext.ux的命名空间的类都会去resources/ux目录下加载
Ext.loadJs("ThinkOA/ns.js");//加载ns.js文件
Ext.loadJs("ThinkOA/constant.js");
Ext.require("ThinkOA.Viewport");//导入自定义类ThinkOA.Viewport 需要保证app目录下有名称为Viewprot.js文件,里面的类名称必须是ThinkOA.Viewport
Ext.require("ThinkOA.LoginWindow");//导入自定义类ThinkOA.LoginWindow
new ThinkOA.LoginWindow({
isDebug: false,
loginUrl: "login.do",//Ext.ParamMgr.getValue("login.url"),
listeners: {
scope: this,
submit: function(win, jsonObject) {
if (jsonObject.success) {
new ThinkOA.Viewport({
});
win.close();
}else {
Ext.MessageBox.alert("提示",jsonObject.message);
}
}
}
}).show();
js文件目录结构如下：
按照这样的方式，当需要引入一个类的时候直接调用Ext.require（）方法即可，这样在使用的时候就会动态去加载这个类，当然也可以动态的去引入一个不是类的js文件，调用Ext.loadJs()即可实现动态加载，现在下面给出动态加载js实现的代码，在这里采用ajax去请求js文件，然而ajax的方式都是异步的，这样就不能保证需要使用的类还没加载完就执行后面的代码，于是先实现一个同步的ajax方法，代码如下：
/**
* 扩张Ext.Ajax对象，增加同步请求方法
*/
Ext.apply(Ext.Ajax, {
/**
* 同步请求方法，将阻塞
*/
syncRequest : function(cfg) {
cfg = Ext.apply({
success : Ext.emptyFn,
failure : Ext.emptyFn
}, cfg)
var obj;
if (window.ActiveXObject) {
obj = new ActiveXObject('Microsoft.XMLHTTP');
} else if (window.XMLHttpRequest) {
obj = new XMLHttpRequest();
}
obj.open('POST', cfg.url, false);
obj.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
obj.send(cfg.params);
var argument = cfg.argument || {};
if (obj.status == 200) {
cfg.success.call(cfg.scope || this, obj,argument);
} else if(obj.status == 404){
// Ext.MessageBox.alert(cfg.url+"不存在！")
cfg.failure.call(cfg.scope || this, obj,argument);
}else {
cfg.failure.call(cfg.scope || this, obj,argument);
}
// var result = Ext.util.JSON.decode(obj.responseText);
}
});
有了此同步请求方法后，下面的js动态加载管理器就很容易实现，当加载一次的js文件就不会再加载，代码：
/**
* js加载管理器
*/
Ext.JsMgr = Ext.extend(Object, {
timeout : 30,
scripts : {},
disableCaching : true,
paths : {},
setPath : function(dest, target) {
this.paths[dest] = target;
},
loadClass : function(className) {
for (var p in this.paths) {
className = className.replace(p, this.paths[p])
}
var jsUrl = className.split(".").join("/") + ".js";
if (!this.scripts[className]) {
//同步请求js文件
Ext.Ajax.syncRequest({
url : jsUrl,
success : this.processSuccess,
failure : this.processFailure,
scope : this,
timeout : (this.timeout * 1000),
disableCaching : this.disableCaching,
argument : {
'url' : className
}
});
}
},
loadJavaScript : function(filepath) {
var className = filepath.replace(".js","").split("/").join(".");
this.loadClass(className);
},
processSuccess : function(response,argument) {
this.scripts[argument.url] = true;
window.execScript ? window
.execScript(response.responseText) : window
.eval(response.responseText);
},
processFailure : function() {
}
})
Ext.JsMgr = new Ext.JsMgr();
Ext.setPath = function(ns,path) {
Ext.JsMgr.setPath(ns,path) ;
}
Ext.require = function() {
Ext.JsMgr.loadClass(arguments[0]);
};
Ext.loadJs = function() {
Ext.JsMgr.loadJavaScript(arguments[0])
}
到此js加载管理器实现完成，目前只是先随便写了个哉项目中使用了下，还比较方便，不再需要大量的引入js，这样就可以实现按需加载，只是目前采用同步加载方式效率不会太高，以后考虑改成异步加载，提高加载速度。最后给出完整代码：
(function() {
/**
* 扩张Ext.Ajax对象，增加同步请求方法
*/
Ext.apply(Ext.Ajax, {
/**
* 同步请求方法，将阻塞
*/
syncRequest : function(cfg) {
cfg = Ext.apply({
success : Ext.emptyFn,
failure : Ext.emptyFn
}, cfg)
var obj;
if (window.ActiveXObject) {
obj = new ActiveXObject('Microsoft.XMLHTTP');
} else if (window.XMLHttpRequest) {
obj = new XMLHttpRequest();
}
obj.open('POST', cfg.url, false);
obj.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
obj.send(cfg.params);
var argument = cfg.argument || {};
if (obj.status == 200) {
cfg.success.call(cfg.scope || this, obj,argument);
} else if(obj.status == 404){
// Ext.MessageBox.alert(cfg.url+"不存在！")
cfg.failure.call(cfg.scope || this, obj,argument);
}else {
cfg.failure.call(cfg.scope || this, obj,argument);
}
// var result = Ext.util.JSON.decode(obj.responseText);
}
});
Ext.override(Ext.mgr.CompMgr,{
getInstance : function(id, override){
var instance, comp = this.get(id);
if(comp){
Ext.require(comp.className);//先加载类
instance = new (comp.getClass())(Ext.apply(comp.getConfig(), override));
}
return instance;
}
})
/**
* js加载管理器
*/
Ext.JsMgr = Ext.extend(Object, {
timeout : 30,
scripts : {},
disableCaching : true,
paths : {},
setPath : function(dest, target) {
this.paths[dest] = target;
},
loadClass : function(className) {
for (var p in this.paths) {
className = className.replace(p, this.paths[p])
}
var jsUrl = className.split(".").join("/") + ".js";
if (!this.scripts[className]) {
//同步请求js文件
Ext.Ajax.syncRequest({
url : jsUrl,
success : this.processSuccess,
failure : this.processFailure,
scope : this,
timeout : (this.timeout * 1000),
disableCaching : this.disableCaching,
argument : {
'url' : className
}
});
}
},
loadJavaScript : function(filepath) {
var className = filepath.replace(".js","").split("/").join(".");
this.loadClass(className);
},
processSuccess : function(response,argument) {
this.scripts[argument.url] = true;
window.execScript ? window
.execScript(response.responseText) : window
.eval(response.responseText);
},
processFailure : function() {
}
})
Ext.JsMgr = new Ext.JsMgr();
Ext.setPath = function(ns,path) {
Ext.JsMgr.setPath(ns,path) ;
}
Ext.require = function() {
Ext.JsMgr.loadClass(arguments[0]);
};
Ext.loadJs = function() {
Ext.JsMgr.loadJavaScript(arguments[0])
}
})();
源码下载地址：http://download.csdn.net/detail/ybhanxiao/7804811
相关推荐
extjs4.0 实现了主页面框架（主框架使用Ext.Viewport，banner使用Ext.panel.Panel，通过toolbar来放置按钮），包括左侧动态菜单实现（采用Ext.tree.Panel）动态从数据库加载数据来显示菜单（后台代码也在了通过json...
ExtJS 4中动态加载的路径设置 Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读（三）——布局和容器 Extjs4 API文档阅读（二）——MVC构架(上) Extjs4 API文档阅读（二）——MVC构架(下) Extjs4...
在实现的时候也会有很多的方法，例如可以用extjs，jquery treeview等一些js开发包。 但是在开发的时候我种想找个例子来参考下，发现有很多这样的例子，包括extjs和jquery treeview的官方也有，但结合java后台实现的...
类系统：作为Extjs 4架构更新的一部分，引用了一个功能更完整的类系统。 沙盒：在ExtJS历史上，ExjJS 4首次提供了完整的沙盒模式。从ExtJS 4开始，框架不再扩展数组或函数等原生对象，因此，与其它的框架同时加载到...
这是我花费数月写的关于Extjs的原创教程，共29个章节。下面是目录： 目 录 1 第一章：序 6 第二章：准备与资源 9 一、下载 9 二、拦路虎 9 三、布署环境 11 四、SpketIDE 12 五、资源 16 六、小结 16 第三章：Ext ...
本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
3.1.2 ExtJS组件配置方式介绍 3.2 信息提示框组件介绍 3.2.1 认识Ext.window.MessageBox 3.2.2 Ext.MessageBox.alert（） 3.2.3 Ext.MessageBox.confirm（） 3.2.4 Ext.MessageBox.prompt（） 3.2.5 Ext....
本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
一、基本按钮，三种方式实现按钮事件 40 二、带图标菜单 41 三、带分割线的按钮 43 四、菜单式按钮 44 四、按钮组合 45 第六章 Ext.MessageBox 消息对话框 46 一、警告对话框和确认对话框 46 二、输入对话框 47 三、...
ExtJS由一系列的类库组成，一旦页面成功加载了ExtJS库后，我们就可以在页面中通过javascript调用ExtJS的类及控件来实现需要的功能。ExtJS的类库由以下几部分组成： 底层API(core)：底层API中提供了对DOM操作、查询...
extjs3.0+struts2 实现登陆 验证码 tree树的加载 首页面。 主要代码还是借鉴别人，然后我再原有基础上再加工。 还没添加数据库类。对于初学者来说还是不错的入门源码。
ExtJS由一系列的类库组成，一旦页面成功加载了ExtJS库后，我们就可以在页面中通过javascript调用ExtJS的类及控件来实现需要的功能。
4.4.4 实现动态加载：ext.loader / 151 4.4.5 管理类的类：ext.classmanager / 159 4.4.6 类创建的总结 / 161 4.5 动态加载的路径设置 / 163 4.6 综合实例：页面计算器 / 165 4.7 本章小结 / 169 第5章 ext ...
通过ExtJS实现UI的动态输出，它提供了最佳的用户体验以及可靠性. 通过Linq-To-SQL进行数据访问，我们计划在ADO.NET Entity Framework成熟以后进行迁移. Restful web service. 通过NBehavior实现行为驱动. ...
4、系统功能定义：定义系统功能，动态加载系统功能。 5、角色权限分配：分配各角色所涉及的功能。 6、用户角色分配：维护相关用户的使用角色。 7、登录日志维护：维护并查看用户日志。 8、参数分类维护：维护...
ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果， 目标是创建没有ViewState，没有JavaScript，没有CSS，没有...
-这样所有需要占据全屏的Panel（不管你是Accordion,Panel,ContentPanel,Form,GroupPanel,SimpleForm,Tree还是Grid,TabStrip）都可以通过这种方式全屏。 -简单方便，示例可以参考 default.aspx 或者 other\...