extjs6.0 动态加载_关于实现Extjs动态加载类的方式实现

Extjs4以前的版本没有动态加载类的方式，这样开发程序的时候加载很多的js会导致加载变慢，由于本人一直使用extjs3的版本进行开发，于是简单实现了一个动态加载类的管理器，使用方式与extjs4的方式有些类似，在每一个类中需要使用其他类的时候像java一样先improt再使用。先看使用方式：

Java代码  

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

newThinkOA.LoginWindow({

isDebug: false,

loginUrl: "login.do",//Ext.ParamMgr.getValue("login.url"),

listeners: {

scope: this,

submit: function(win, jsonObject) {

if(jsonObject.success) {

newThinkOA.Viewport({

});

win.close();

}else{

Ext.MessageBox.alert("提示",jsonObject.message);

}

}

}

}).show();

js文件目录结构如下：

按照这样的方式，当需要引入一个类的时候直接调用Ext.require()方法即可，这样在使用的时候就会动态去加载这个类，当然也可以动态的去引入一个不是类的js文件，调用Ext.loadJs()即可实现动态加载，现在下面给出动态加载js实现的代码，在这里采用ajax去请求js文件，然而ajax的方式都是异步的，这样就不能保证需要使用的类还没加载完就执行后面的代码，于是先实现一个同步的ajax方法，代码如下：

Js代码  

/**

* 扩张Ext.Ajax对象，增加同步请求方法

*/

Ext.apply(Ext.Ajax, {

/**

* 同步请求方法，将阻塞

*/

syncRequest : function(cfg) {

cfg = Ext.apply({

success : Ext.emptyFn,

failure : Ext.emptyFn

}, cfg)

varobj;

if(window.ActiveXObject) {

obj = newActiveXObject('Microsoft.XMLHTTP');

} elseif(window.XMLHttpRequest) {

obj = newXMLHttpRequest();

}

obj.open('POST', cfg.url,false);

obj.setRequestHeader('Content-Type',

'application/x-www-form-urlencoded');

obj.send(cfg.params);

varargument = cfg.argument || {};

if(obj.status == 200) {

cfg.success.call(cfg.scope || this, obj,argument);

} elseif(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代码  

/**

* js加载管理器

*/

Ext.JsMgr = Ext.extend(Object, {

timeout : 30,

scripts : {},

disableCaching : true,

paths : {},

setPath : function(dest, target) {

this.paths[dest] = target;

},

loadClass : function(className) {

for(varpinthis.paths) {

className = className.replace(p, this.paths[p])

}

varjsUrl = 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) {

varclassName  = 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 = newExt.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，这样就可以实现按需加载，只是目前采用同步加载方式效率不会太高，以后考虑改成异步加载，提高加载速度。最后给出完整代码：

Java代码  

(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 = newActiveXObject('Microsoft.XMLHTTP');

} elseif(window.XMLHttpRequest) {

obj = newXMLHttpRequest();

}

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);

} elseif(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));

}

returninstance;

}

})

/**

* 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 inthis.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 = newExt.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