下面是2種動態加載js的方法，這2種方法都很好用，速度上感覺不出差別，當加載了一次之后，第2次以
后都不會重復加載，這樣的話就不會每次點擊都向服務器下載js！
這2種方法中，我個人覺得第2種是比較好用，它可以在callback里直接使用剛加載的js。
//第1種動態加載js
function GetHttpRequest()
{
if ( window.XMLHttpRequest )
return new XMLHttpRequest() ;
else if ( window.ActiveXObject ) // IE
return new ActiveXObject("MsXml2.XmlHttp") ;
}
function loadJS(jsName) {
var oXmlHttp = GetHttpRequest() ;
oXmlHttp.onreadystatechange = function()
{
if ( oXmlHttp.readyState == 4 )
{
if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 )
{
txt = oXmlHttp.responseText;
var scriptTag = document.getElementById(id);
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
if (scriptTag)
oHead.removeChild(scriptTag );
oScript.id = "loadJS_id";
oScript.type = "text/javascript";
oScript.src= jsName+".js" ;
oHead.appendChild(oScript);
}
else
{
alert('操作失敗:' + oXmlHttp.statusText + '(' + oXmlHttp.status + ')' ) ;
}
}
}
url = '' + jsName + '.js';
oXmlHttp.open('GET', url, true);
oXmlHttp.send(null);
}
//使用：
if(true)
{
tbar.push({
text : '新增',
tooltip : '新增一條記錄',
iconCls : _addIco,
handler : function()
{
var el = Ext.get("loadJS_id");
if(!el)
{
loadJS("addTest"); //addTest,js文件名
}
add();
}
}, '-');
}
//第2種動態加載js
ScriptLoader = function() {
this.timeout = 30;
this.scripts = [];
this.disableCaching = false;
this.loadMask = null;
};
ScriptLoader.prototype = {
showMask: function() {
if (!this.loadMask) {
this.loadMask = new Ext.LoadMask(Ext.getBody());
this.loadMask.show();
}
},
hideMask: function() {
if (this.loadMask) {
this.loadMask.hide();
this.loadMask = null;
}
},
processSuccess: function(response) {
this.scripts[response.argument.url] = true;
window.execScript ? window.execScript(response.responseText) : window.eval(response.responseText);
if (response.argument.options.scripts.length == 0) {
this.hideMask();
}
if (typeof response.argument.callback == 'function') {
response.argument.callback.call(response.argument.scope);
}
},
processFailure: function(response) {
this.hideMask();
Ext.MessageBox.show({title: 'Application Error', msg: 'Script library could not be loaded.', closable: false, icon: Ext.MessageBox.ERROR, minWidth: 200});
setTimeout(function() { Ext.MessageBox.hide(); }, 3000);
},
load: function(url, callback) {
var cfg, callerScope;
if (typeof url == 'object') { // must be config object
cfg = url;
url = cfg.url;
callback = callback || cfg.callback;
callerScope = cfg.scope;
if (typeof cfg.timeout != 'undefined') {
this.timeout = cfg.timeout;
}
if (typeof cfg.disableCaching != 'undefined') {
this.disableCaching = cfg.disableCaching;
}
}
if (this.scripts[url]) {
if (typeof callback == 'function') {
callback.call(callerScope || window);
}
return null;
}
this.showMask();
Ext.Ajax.request({
url: url,
success: this.processSuccess,
failure: this.processFailure,
scope: this,
timeout: (this.timeout*1000),
disableCaching: this.disableCaching,
argument: {
'url': url,
'scope': callerScope || window,
'callback': callback,
'options': cfg
}
});
}
};
ScriptLoaderMgr = function() {
this.loader = new ScriptLoader();
this.load = function(o) {
if (!Ext.isArray(o.scripts)) {
o.scripts = [o.scripts];
}
o.url = o.scripts.shift();
if (o.scripts.length == 0) {
this.loader.load(o);
} else {
o.scope = this;
this.loader.load(o, function() {
this.load(o);
});
}
};
};
ScriptMgr = new ScriptLoaderMgr();
//使用：
{
id : "d_m_sub3",
xtype : "tbbutton",
text : "完成任務",
iconCls : "sub2",
handler : function(){
ScriptMgr.load({
scripts: ['/baoa/oaTask/oaTask_task7/oaTask_task7_browse.js','/baoa/oaTask/oaTask_task8/oaTask_task8_browse.js'],
callback: function() {
var n = Ext.getCmp("rightPanelId").getComponent("d_m_sub3");
if (!n)
{ // 判斷是否已經打開該面板
n = Ext.getCmp("rightPanelId").add
({
id:"d_m_sub3",
title:'完成任務',
closable : true,
items :[ {autoScroll : true,border:false,layout:'form',items:[Lbo_oaTask_task7_browse(param).prop.grid,Lbo_oaTask_task8_browse(param).prop.grid]} ]
});
}
Ext.getCmp("rightPanelId").setActiveTab(n);
Ext.getCmp("rightPanelId").doLayout();
}
});
}
}
ScriptMgr.load
({
scripts: ['/baoa/oaTask/oaTask_task/oaTask_task_add.js'],
callback: function() {
showAddForm();
}
});