轉(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é)議運行程序。比如 file://path/to/your/index.html
????????舒服的調(diào)試體驗:錯誤信息將返回確切的文件名字和行數(shù)。
?
?
缺點
?????????依賴必須事先指定
?
使用方法
?方法一:明確包含你想要的
?
- //?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.*' );???
?
同步加載
?
?
優(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 將會自動按照需要獲取所有的依賴,因為它們在運行時需要。例如:
?
- 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(...);??
這樣,所有的東西都將通過異步的模式加載
?
?
發(fā)布
?
?
有一點很重要,動態(tài)加載至能在開發(fā)的時候在本機上使用。產(chǎn)品發(fā)布的時候,所有的依賴最好是組合成一個獨一的 JavaScript 文件 。Ext.Loader 使項目從開發(fā)維護發(fā)布之間轉(zhuǎn)換變得很容易 。在內(nèi)部, Ext.Loader.history 控制了你的項目所有依賴的加載順序的列表 。把這個列表中的所有依賴壓縮成一個,然后把它包含在你項目的最頂部。這個處理過程將會使用SenchCommand 自動完成。
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
