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

--------------------------转自 http://hi.baidu.com/lzkv/blog/item/30d9d4b4ac9f31788ad4b245.html
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值