轉(zhuǎn)載：http://blog.csdn.net/yanwushu/article/details/8296372

?

Ext.Loader 在 ExtJs4+ 中是動態(tài)加載的核心。一般通過 Ext.require （）使用。Ext.Loader同時支持同步和異步加載方式。這里，我們將討論這兩種加載方式的優(yōu)缺點。

?

異步加載

?

?

優(yōu)勢

?

?

跨域訪問

不需要 web 服務(wù)器 : 你能通過文件系統(tǒng)協(xié)議運(yùn)行程序。比如 file://path/to/your/index.html

????????舒服的調(diào)試體驗：錯誤信息將返回確切的文件名字和行數(shù)。

?

?

缺點

?

????????依賴必須事先指定

?

使用方法

?

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

?

[javascript] ? view plain copy

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 plain copy

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.*' );???

?

同步加載

?

?

優(yōu)勢

????????它不需要事先指明依賴，事先包含 ext-all.js 是很方便的 。

?

劣勢

?

?

調(diào)試體驗不好，除非用 Firebug 調(diào)試 ，否則出錯的文件的名字不會顯示。

不能跨域請求，因為 XHR 的限制必須是相同的域名 。并且因為這個原因，必須有 web 服務(wù) 。

?

?

使用方法

?

?

可以遵守一個簡單的法則：用 Ext.create 代替new 關(guān)鍵字來 實例化對象。

?

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 會自動檢查給定的類名 或別名是否在頁面已經(jīng)存在。如果沒有， Ext.Loader 將會立即把它調(diào)整為同步模式，自動加載給定的類和它所有的依賴 。

?

?

混合加載

混合加載方式可以結(jié)合同步和異步加載的優(yōu)勢。開發(fā)流程非常簡單：
第一步 : 用同步的方式寫你的程序 ，Ext.Loader 將會自動按照需要獲取所有的依賴，因為它們在運(yùn)行時需要。例如：

?

[javascript] ? view plain copy

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 plain copy

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 plain copy

1. Ext.require( 'Ext.window.Window' );Ext.require( 'Ext.layout.container.Border' );??
2. Ext.onReady(...);??

這樣，所有的東西都將通過異步的模式加載

?

?

發(fā)布

?

?

有一點很重要，動態(tài)加載至能在開發(fā)的時候在本機(jī)上使用。產(chǎn)品發(fā)布的時候，所有的依賴最好是組合成一個獨(dú)一的 JavaScript 文件 。Ext.Loader 使項目從開發(fā)維護(hù)發(fā)布之間轉(zhuǎn)換變得很容易 。在內(nèi)部， Ext.Loader.history 控制了你的項目所有依賴的加載順序的列表 。把這個列表中的所有依賴壓縮成一個，然后把它包含在你項目的最頂部。這個處理過程將會使用SenchCommand 自動完成。

?

Ext.Loader