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();
ScriptMgr.load({
scripts: ['/js/other-prerequisite.js', '/js/other.js'],
callback: function() {
var other = new OtherObject();
alert(other); //just loaded
}
});
http://www.extjs.com/forum/showthread.php?37897-dynamically-load-javascript
国外人写的一个动态加载JS的工具,开发的时候还是可以用的着的。
分享到:
相关推荐
`Ext.Loader` 是 Ext4 中的一个核心特性,用于动态加载所需的 JavaScript 类库和模块,这在开发大型应用时尤其有用,因为它可以显著减少页面初次加载时的资源需求。 动态加载的核心在于按需加载,即只有在实际需要...
在Ext JS这个强大的JavaScript框架中,动态加载表单数据是一种常见的功能需求,特别是在构建数据驱动的应用程序时。本文将深入探讨如何使用JSON格式的数据来实现这一功能,以便于灵活地更新和显示表单内容。 首先,...
- **动态生成**:开发者可以通过编程方式动态生成表单元素,例如使用`Ext.Component`或`Ext.form.field.Base`的子类,根据需求动态添加或移除表单字段。 - **数据绑定**:EXT4.3支持双向数据绑定,允许表单字段与...
本例采用ASP.NET MVC3 +EXTJS4 MVC 框架,完美实现了EXTJS4动态加载JS文件,对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助,快速掌握MVC框架,本...
EXT JS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,其组件化的设计使得创建复杂的用户界面变得简单。EXT JS中的Grid Panel是常用的数据显示组件,而动态列的功能则为Grid Panel增加了灵活的可配置性...
EXT JS作为一个成熟的前端框架,其动态加载机制对于提升Web应用的性能和用户体验扮演着至关重要的角色。本文将对EXT JS的动态加载机制进行详细探讨,并对其实施方法及效果进行分析。 EXT JS是一种基于JavaScript的...
EXT树的动态加载能力是其一大亮点,它允许我们按需加载节点,从而减少初始页面加载时的数据量,提高应用性能。 在EXT树中,动态加载通常是通过使用`TreeLoader`类实现的。这个类负责从服务器获取子节点数据,当用户...
用户交互时,页面内容通过JavaScript动态更新,而不是刷新整个页面。这种方式提高了用户体验,减少了页面加载次数。 JavaScript代码按照Model-View-Controller(MVC)模式进行组织。MVC是一种软件设计模式,将应用...
JavaScript是EXT JS的基础,它是一种广泛使用的客户端脚本语言,用于在用户的浏览器上运行代码,实现动态交互效果。JavaScript与EXT JS的结合使得开发者可以利用EXT JS提供的高级UI组件和数据管理功能,同时利用...
本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1. **创建 ColumnModel** `Ext.grid.ColumnModel` 是用于定义 `GridPanel` 列结构的类。在创建 `ColumnModel` 时,我们需要提供一个包含列信息的 JavaScript ...
本文将深入探讨“js写的加载效果,模仿Ext的效果”这一主题,包括JavaScript的基本概念、加载效果的原理以及如何实现类似Ext JS的加载动画。 首先,JavaScript是Web开发中的关键组成部分,它使得网页变得动态且交互...
在EXT JS这个强大的JavaScript库中,树形组件(Tree)是一种常见的UI元素,常用于展现层级结构的数据。本文将深入探讨如何处理无限级JSON数据格式并实现动态加载,以优化EXT树的性能。 首先,我们要理解EXT树的基本...
EXT,全称EXT JS,是一种基于JavaScript的富客户端框架,由Sencha公司开发,用于构建交互性强、功能丰富的Web应用程序。在EXT中,"动态新增一行"是指在表格或者布局中,通过用户操作(比如点击按钮)来动态地添加新...
EXT JS 是一个强大的JavaScript库,专门用于构建富客户端应用程序,尤其在企业级Web应用中广泛应用。EXT JS 提供了丰富的组件、布局管理、数据绑定、拖放功能等,使得开发者可以构建出美观且功能强大的用户界面。EXT...
在实际项目中,结合`jq`库(可能是jQuery的简写),可以方便地处理DOM操作,与EXTJS的组件交互,进一步增强动态加载的效果,比如添加动态加载的动画、错误处理等。 总结来说,`Ext.Panel`和`TreePanel`在EXTJS中是...
EXT是一个强大的JavaScript库,主要用于构建富客户端应用,尤其在数据可视化和用户界面设计方面表现出色。动态树是一种可交互的数据结构,它允许用户通过增、删、改操作来管理层次结构的数据。EXT提供了丰富的组件来...
Ext4.0是Sencha Ext JS的一个版本,它提供了一个强大的JavaScript组件库,用于构建富客户端应用程序。 首先,ComboBox在Ext JS中是一个可选列表的输入控件,它可以展示一个下拉菜单供用户选择。在本地模式下,...
在本文中,我们将深入探讨如何利用Ext JS这一强大的JavaScript框架来动态加载JavaScript创建窗体。 Ext JS是一个用于构建桌面和移动Web应用的富客户端JavaScript框架,它提供了丰富的UI组件和强大的数据管理功能。...
EXT2.0通过异步加载数据来实现动态性,只在需要时加载树节点,这减少了初次加载时的数据量,提高了页面响应速度。 分页是另一种优化数据展示和处理的方法,尤其适用于处理大量数据的情况。EXT2.0提供了分页网格组件...
《JavaScript凌厉开发——Ext JS3详解与实践》是一本深度探讨JavaScript库Ext JS3的专著,旨在帮助开发者深入理解和高效运用这一强大的前端框架。本文将围绕标题、描述及标签,详细介绍Ext JS3的核心概念、关键特性...