Ext.Loader在ExtJs4+中是动态加载的核心。一般通过Ext.require()使用。Ext.Loader同时支持同步和异步加载方式。这里,我们将讨论这两种加载方式的优缺点。
异步加载
优势
跨域访问
不需要web服务器:你能通过文件系统协议运行程序。比如file://path/to/your/index.html
舒服的调试体验:错误信息将返回确切的文件名字和行数。
缺点
依赖必须事先指定
使用方法
方法一:明确包含你想要的
// Syntax Ext.require({String/Array} expressions); // Example: Single alias Ext.require('widget.window'); // Example: Single class name Ext.require('Ext.window.Window'); // Example: Multiple aliases / class names mix Ext.require(['widget.window', 'layout.border', 'Ext.data.Connection']); // Wildcards Ext.require(['widget.*', 'layout.*', 'Ext.data.*']);
方法二,明确排除你不想要的
// Syntax: Note that it must be in this chaining format. Ext.exclude({String/Array} expressions) .require({String/Array} expressions); // Include everything except Ext.data.* Ext.exclude('Ext.data.*').require('*'); // Include all widgets except widget.checkbox*, // which will match widget.checkbox, widget.checkboxfield, widget.checkboxgroup, etc. Ext.exclude('widget.checkbox*').require('widget.*');
同步加载
优势
它不需要事先指明依赖,事先包含 ext-all.js 是很方便的。
劣势
调试体验不好,除非用Firebug调试,否则出错的文件的名字不会显示。
不能跨域请求,因为XHR的限制必须是相同的域名。并且因为这个原因,必须有web服务。
使用方法
可以遵守一个简单的法则:用Ext.create代替new关键字来实例化对象。
15 Ext.create('widget.window', { ... }); // Instead of new Ext.window.Window({...});
16 Ext.create('Ext.window.Window', {}); // Same as above, using full class name instead of alias
17 Ext.widget('window', {}); // Same as above, all you need is the traditional `xtype`
在后台,Ext.ClassManager会自动检查给定的类名或别名是否在页面已经存在。如果没有,Ext.Loader将会立即把它调整为同步模式,自动加载给定的类和它所有的依赖。
混合加载
混合加载方式可以结合同步和异步加载的优势。开发流程非常简单:
第一步 : 用同步的方式写你的程序,Ext.Loader 将会自动按照需要获取所有的依赖,因为它们在运行时需要。例如:
Ext.onReady(function(){ var window = Ext.createWidget('window', { width: 500, height: 300, layout: { type: 'border', padding: 5 }, title: 'Hello Dialog', items: [{ title: 'Navigation', collapsible: true, region: 'west', width: 200, html: 'Hello', split: true }, { title: 'TabPanel', region: 'center' }] }); window.show(); })
第二步:观看控制台的中如下的警告:
在Ext.onReady上面添加加载依赖的代码:[Ext.Loader] Synchronously loading 'Ext.window.Window'; consider adding Ext.require('Ext.window.Window') before your application's code ClassManager.js:432 [Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') before your application's code
Ext.require('Ext.window.Window');Ext.require('Ext.layout.container.Border'); Ext.onReady(...);
这样,所有的东西都将通过异步的模式加载
发布
有一点很重要,动态加载至能在开发的时候在本机上使用。产品发布的时候,所有的依赖最好是组合成一个独一的JavaScript文件。Ext.Loader使项目从开发维护发布之间转换变得很容易。在内部,Ext.Loader.history控制了你的项目所有依赖的加载顺序的列表。把这个列表中的所有依赖压缩成一个,然后把它包含在你项目的最顶部。这个处理过程将会使用SenchCommand自动完成。