Ext动态加载JS文件

  下面是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(); } });