Ext.Loader

转载：http://blog.csdn.net/yanwushu/article/details/8296372

 

Ext.Loader在ExtJs4+中是动态加载的核心。一般通过Ext.require（）使用。Ext.Loader同时支持同步和异步加载方式。这里，我们将讨论这两种加载方式的优缺点。

 

异步加载

 

 

 

优势

 

 

跨域访问

不需要web服务器:你能通过文件系统协议运行程序。比如file://path/to/your/index.html

        舒服的调试体验：错误信息将返回确切的文件名字和行数。

 

 

缺点

 

        依赖必须事先指定

 

使用方法

 

方法一：明确包含你想要的

 

[javascript] view plaincopy
  1. // Syntax   
  2. Ext.require({String/Array} expressions);   
  3.    
  4. // Example: Single alias   
  5. Ext.require('widget.window');   
  6.    
  7. // Example: Single class name   
  8. Ext.require('Ext.window.Window');   
  9.    
  10. // Example: Multiple aliases / class names mix   
  11. Ext.require(['widget.window', 'layout.border', 'Ext.data.Connection']);   
  12.    
  13. // Wildcards   
  14. Ext.require(['widget.*', 'layout.*', 'Ext.data.*']);   


 

方法二，明确排除你不想要的

 

 

[javascript] view plaincopy
  1. // Syntax: Note that it must be in this chaining format.   
  2. Ext.exclude({String/Array} expressions)   
  3.    .require({String/Array} expressions);   
  4.    
  5. // Include everything except Ext.data.*   
  6. Ext.exclude('Ext.data.*').require('*');   
  7.    
  8. // Include all widgets except widget.checkbox*,   
  9. // which will match widget.checkbox, widget.checkboxfield, widget.checkboxgroup, etc.   
  10. 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将会自动按照需要获取所有的依赖，因为它们在运行时需要。例如：

 

[javascript] view plaincopy
  1. Ext.onReady(function(){   
  2.     var window = Ext.createWidget('window', {   
  3.         width: 500,   
  4.         height: 300,   
  5.         layout: {   
  6.             type: 'border',   
  7.             padding: 5   
  8.         },   
  9.         title: 'Hello Dialog',   
  10.         items: [{   
  11.             title: 'Navigation',   
  12.             collapsible: true,   
  13.             region: 'west',   
  14.             width: 200,   
  15.             html: 'Hello',   
  16.             split: true   
  17.         }, {   
  18.             title: 'TabPanel',   
  19.             region: 'center'   
  20.         }]   
  21.     });   
  22.    
  23.     window.show();   
  24. })   


 

第二步：观看控制台的中如下的警告：

 

[javascript] view plaincopy
  1. [Ext.Loader] Synchronously loading 'Ext.window.Window'; consider adding Ext.require('Ext.window.Window') before your application's code  
  2. ClassManager.js:432  
  3. [Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') before your application's code  


在Ext.onReady上面添加加载依赖的代码：
[javascript] view plaincopy
  1. Ext.require('Ext.window.Window');Ext.require('Ext.layout.container.Border');  
  2. Ext.onReady(...);  

这样，所有的东西都将通过异步的模式加载

 

 

发布

 

 

 

有一点很重要，动态加载至能在开发的时候在本机上使用。产品发布的时候，所有的依赖最好是组合成一个独一的JavaScript文件。Ext.Loader使项目从开发维护发布之间转换变得很容易。在内部，Ext.Loader.history控制了你的项目所有依赖的加载顺序的列表。把这个列表中的所有依赖压缩成一个，然后把它包含在你项目的最顶部。这个处理过程将会使用SenchCommand自动完成。

 

posted @ 2014-01-24 09:24  天马3798  阅读(366)  评论(0)  编辑  收藏  举报