Ext 2.0动态加载JS工具类（经典）

最新推荐文章于 2025-08-12 16:10:01 发布

solarmoons

最新推荐文章于 2025-08-12 16:10:01 发布

阅读量140

点赞数

CC 4.0 BY-SA版权

分类专栏： ext 文章标签： EXT Ajax PHP prototype .net

本文链接：https://blog.youkuaiyun.com/solarmoons/article/details/83438960

ext 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种利用ExtJS实现动态加载JS组件的方法。通过ScriptLoader类和ScriptLoaderMgr类，可以有效地按需加载外部JavaScript文件，并在加载完成后执行回调函数。此方案解决了单页面应用中组件动态加载的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：
http://www.ajaxbbs.net/post/extjs/ExtJs-dynamic-LoadJS-Class.html

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

构建一个one page one application的应用，动态的加载js组件是关键，虽然看到了5，6种解决方案，可是还是没办法做的很通用，作为一个项目组件。突然发现ExtJs的官方论坛确实是个好地方，由很多好用的资源，可是E文还是没有母语看这舒服，把最好的方案记录下。原文地址：http://extjs.com/forum/showthread.php?t=37897

使用示例:

ScriptMgr.load

({    
    scripts: ['/js/other-prerequisite.js'
, '/js/other.js'
],    
    callback: function
() {    
    var
 other = new
 OtherObject();    
      alert(other); //just loaded   
 
    }    
});