转载：http://blog.csdn.net/yanwushu/article/details/8296372
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 自动完成。
