`
nbkangta
  • 浏览: 431556 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

Ext 2.0动态加载JS工具类

    博客分类:
  • 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(); 

 构建一个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
  }
}); 
 
分享到:
评论

相关推荐

    Ext2.0组件,全组件和帮助手册

    Ext2.0是Ext JS库的一个早期版本,它是一个用于构建富互联网应用程序(RIA)的JavaScript框架。这个框架提供了一套完整的UI组件和强大的数据管理功能,使得开发者能够创建交互性强、功能丰富的Web应用。全组件和帮助...

    简单介绍Ext 2.0

    ### 使用Ext 2.0完成常见JavaScript任务 #### 一、引言 Ext 2.0是一款非常流行的JavaScript框架,它极大地简化了Web应用程序的开发过程。本文将详细介绍如何使用Ext 2.0来实现一些JavaScript中的常见任务,如DOM...

    ext 2.0

    8. **Tree Panel**:EXT 2.0 还包含了一个树形视图组件,用于展示层次结构的数据,支持动态加载和节点操作。 9. **Drag and Drop**:EXT 2.0 提供了拖放功能,可以实现组件之间的交互,增强用户体验。 10. **图表*...

    EXT2.0-API

    EXT2.0-API是关于EXT JavaScript库的一个重要版本的接口文档。EXT是一个广泛使用的前端开发框架,特别是用于构建数据驱动的Web应用程序。EXT2.0是EXT库的一个里程碑,引入了许多增强功能和改进,使开发者能够创建...

    Ext 2.0 中文api 天涯浪子

    9. **工具提示和弹出框**:Ext 2.0提供了Tip和MessageBox等组件,方便添加提示信息和弹出对话框,提升用户体验。 10. **国际化支持**:尽管这个中文API文档是针对中文环境的,但Ext 2.0本身具有很好的国际化支持,...

    Ext2.0英文API文档

    9. **工具提示(Tooltips)**:可以为任何元素添加动态显示的提示信息。 10. **事件处理(Event Handling)**:组件间的交互主要通过事件驱动,如点击、改变等。开发者可以通过监听和触发事件来实现复杂的功能。 ...

    ext2.0中文API(部分)

    EXT 2.0 API 是一个用于构建富互联网应用程序(Rich Internet Applications, RIA)的JavaScript框架,它在前端开发领域中扮演着重要角色。EXT 2.0 提供了一套全面且强大的组件库,使开发者能够创建功能丰富的、交互...

    EXT2.0中文教程、ExtJS 实用简明教程

    这个实用简明教程可能涵盖了EXT2.0的所有内容,并且可能深入到EXT3.x或更高版本的特性,如EXT JS的Grid Panel(表格面板)的高级功能、数据存储和远程数据加载、图表组件、拖放操作以及自定义组件的开发。...

    ext2.0

    EXT 是一个流行的 JavaScript 框架,专门用于构建富客户端的 Web 应用程序。EXT 2.0 版本在此基础上提供了更完善的前端交互功能,特别是在前后台数据通信方面。EXT 的核心优势在于它的组件化设计,能够轻松地创建...

    【Ext2.0】只有月份的日期控件

    【Ext2.0】只有月份的日期控件 在网页应用开发中,用户界面的交互性和易用性是至关重要的。...不过需要注意的是,由于这是针对Ext2.0的扩展,对于更新版本的Ext JS框架,可能需要进行适配或寻找相应的替代组件。

    Ext js 2.0

    总的来说,Ext JS 2.0是JavaScript库中的一颗璀璨明珠,它的出现极大地推动了Web应用程序的发展,为开发者提供了构建高性能、交互丰富的RIA的强大工具。无论你是初学者还是经验丰富的开发者,深入学习和掌握Ext JS ...

    ext2.0中文语言包gb2312格式

    标题中的"ext2.0中文语言包gb2312格式"指的是EXT JS框架的2.0版本的一个中文语言包,该包采用了GB2312编码格式。EXT JS是一个广泛使用的JavaScript库,用于构建富互联网应用程序(RIA)。它提供了一套完整的组件模型...

    Ext2.0 文件上传组件

    总之,"Ext2.0 文件上传组件"是一个强大且灵活的前端工具,通过理解其核心特性、工作原理以及如何在项目中集成和优化,开发者可以为用户提供高效、安全的文件上传功能。深入学习源码将有助于定制化需求,提升应用的...

    Ext2.0实用简明教程

    **Ext2.0实用简明教程** 在Web开发领域,ExtJS是一个强大的JavaScript库,用于构建用户界面。本文档将详细介绍ExtJS 2.0版本,帮助开发者快速掌握其核心概念和常用功能。 **一、序** 在互联网应用日益复杂的今天...

    ext.net2.0的dll

    Ext.NET 2.0 是对Ext JS库的.NET封装,Ext JS是一个强大的JavaScript库,用于创建具有丰富用户界面的Web应用。通过Ext.NET 2.0,开发者可以直接在C#或VB.NET中编写代码,利用.NET的强类型和面向对象特性,无需深入...

    web工程2.0添加ext框架

    3. **配置应用**:创建EXT应用程序的基本结构,包括App.js文件,定义你的应用程序类,并配置所需的组件和视图。 4. **编写组件**:根据需求创建自定义组件,EXT5.0提供了丰富的预定义组件,你可以直接使用,也可以...

    ext2.02文档下载

    总的来说,EXT2.02文档下载提供了EXT框架的重要开发资源,特别是API文档,对于任何使用EXT2.0进行开发的人员来说都是必不可少的工具。结合这些文档和其他辅助资源,开发者可以更好地掌握EXT2.0的用法,提升开发效率...

    Ext 2 中文API Documentation

    6. **工具提示(Tooltips)**:EXT提供了一种自定义的工具提示功能,可以为任何元素添加动态显示的信息。API文档会指导开发者如何创建和配置这些提示。 7. **拖放(Drag and Drop)**:EXT支持拖放操作,使得用户...

    Ext框架开发文档及ext-core.js

    8. **API文档**:EXT2.0_API.chm是EXT框架的API参考手册,包含了所有类、方法和属性的详细说明,是开发时的重要参考资料。 9. **版本**:ext-2.2.zip代表EXT框架的2.2版本,这是一个较早的版本,但依然包含了许多...

    ext 下拉树demo

    EXT是一个强大的JavaScript框架,它提供了丰富的组件库,包括下拉树(TreePicker)这样的控件。这篇博客文章可能是介绍如何在EXT中实现一个下拉树的功能,并提供了一个名为`TreePicker.js`的代码示例。 EXT框架由...

Global site tag (gtag.js) - Google Analytics