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
相关推荐
在“Extjs动态加载菜单”这个主题中，我们将深入探讨这一功能的实现方式以及相关技术。 首先，动态加载菜单的概念是指菜单项不是在页面加载时一次性全部显示，而是根据用户的操作或特定条件按需加载。这种设计提高...
我们首先从标题"ExtJs动态grid的生成"开始，了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味着在运行时根据需求创建和更新Grid组件，而不是在应用初始化时静态定义。这种灵活性允许开发者更好地响应数据...
动态加载是ExtJS中的一个重要概念，它允许应用程序按需加载所需的类和资源，从而减少初始页面加载时间，提高用户体验。 在“Extjs4.2 动态加载项目(权限模块)”中，动态加载主要体现在两个方面：一是对代码的懒加载...
在"动态添加表单"这个主题中，我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先，我们要理解表单（Form）在ExtJS中的基本概念。表单是数据输入和验证的核心组件，可以包含各种字段类型，如文本框、下拉...
在讨论ExtJs实现动态加载grid的完整示例之前，我们需要了解ExtJs框架中一些基础组件的作用。ExtJs是一个基于JavaScript的框架，广泛用于构建丰富互联网应用（RIA）。ExtJs提供了大量预构建的组件，这些组件可以通过...
你可以通过Ajax请求获取服务器上的数据，并将其加载到Store中，从而实现动态加载节点。这不仅提高了页面的加载速度，还使得用户可以查看大量的层次结构数据而无需一次性加载所有内容。 首先，创建一个树形控件...
异步加载树型是 ExtJS Tree 的一个重要特性，允许只在需要时动态加载子节点，从而提高页面的加载速度和用户体验。 异步加载通常通过 AJAX 请求实现，只有当用户展开一个节点时，才会向服务器请求该节点的子节点数据...
具体实现方式取决于使用的后端技术栈。 #### 五、总结 通过以上步骤，我们实现了基于ExtJS的动态加载树形结构的功能。这种方式不仅可以提高系统的响应速度，还能更好地管理大量的数据。此外，还可以根据实际需求...
ExtJS 动态树结构与Struts框架结合，主要用于构建基于Web的动态树形界面，让用户能够以图形化的方式查看和操作层次结构的数据。在这一过程中，Struts作为MVC框架负责后端业务逻辑处理，而ExtJS则作为前端展示库，...
ExtJS 动态表单是基于Sencha ExtJS框架实现的一种灵活、可扩展的表单设计方式，它允许开发者在运行时动态地创建、修改或加载表单组件，以适应不同场景下的数据输入需求。在Web应用开发中，动态表单通常用于处理不...
在ExtJS中，我们可以利用TreeStore和AjaxProxy来实现动态加载。TreeStore用于存储树节点的数据，而AjaxProxy则负责向服务器发送请求并处理响应。 接下来，我们探讨**JDBC访问SQL Server数据库**。Java Database ...
在IT领域，构建用户界面时，动态树结构是一种常见的数据展示方式，它允许用户交互地展开和折叠节点，以查看和操作层次结构的数据。本文将深入探讨如何在Struts2.0.x框架下利用ExtJs库来实现动态树的解决方案。 首先...
在本文中，我们将深入探讨如何使用ExtJS框架的Tree组件，结合JSON数据格式以及Struts 2框架，来实现Ajax动态加载树形结构的节点。这是一项常见的需求，特别是在构建可扩展、用户友好的Web应用时，动态加载的树结构...
ExtJS4是一个强大的JavaScript框架，用于构建富客户端应用程序。在这个示例中，我们将探讨如何实现一个动态树结构，其中数据是通过...这种动态加载的方式使得树结构可以根据用户交互灵活地展示数据，提高了用户体验。
在EXTJS中，动态树的实现主要依赖于`Ext.tree.Panel`类和`Ext.data.TreeStore`类。`TreeStore`负责管理树的数据源，而`TreePanel`则用于展示这些数据。以下是一个简单的EXTJS动态树实现的步骤： 1. **定义数据模型...
本示例程序代码是基于ExtJS技术实现的DataGrid动态数据绑定检索功能，它允许用户实时地从服务器检索和展示数据。 在DataGrid组件中，动态数据绑定是指将表格的数据源与服务器上的数据实时连接，当数据发生变化时，...
EXTJS的动态树（TreePanel）组件允许开发者创建可交互的树形结构，这些结构可以动态地加载数据。树节点可以包含子节点，可以展开或折叠，支持拖放操作，非常适合用来展示层次化的信息，如目录结构、组织架构等。动态...
ExtJS动态打包Loader是JavaScript开发中的一个重要工具，主要用于优化和管理Ext JS应用程序的资源加载。在大型Web应用中，由于代码量大、模块多，如何有效地加载和组织这些资源成为一个关键问题。动态打包Loader就是...
在本文中，我们将深入探讨如何利用ExtJS和CSS来实现加载时的缓冲效果。 一、ExtJS的Loading效果 ExtJS的loading效果是指当数据正在后台加载或页面正在处理时，显示的一种视觉提示，告知用户系统正在进行工作。这...