ExtJs按需動(dòng)態(tài)加載(多app模式)_第1頁(yè)
ExtJs按需動(dòng)態(tài)加載(多app模式)_第2頁(yè)
ExtJs按需動(dòng)態(tài)加載(多app模式)_第3頁(yè)
ExtJs按需動(dòng)態(tài)加載(多app模式)_第4頁(yè)
ExtJs按需動(dòng)態(tài)加載(多app模式)_第5頁(yè)
已閱讀5頁(yè)，還剩1頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、ExtJs 按需動(dòng)態(tài)加載（多app模式）在Extjs中，為了滿足動(dòng)態(tài)加載js文件的過(guò)程，經(jīng)過(guò)本人測(cè)試，可采用以下兩種方式：javascript view plain copy 1.   1、在一個(gè)application實(shí)例下在此情況下，可采用Ext.require()函數(shù)進(jìn)行動(dòng)態(tài)按需加載js文件。以加載一個(gè)controller為例：javascript view plain copy 1. Ext.require('MyApp.controller.event.Bases',function()&#

2、160; 2.                            MyApp.getController('event.Bases').init();  3.           

3、                 tab = me.getTabpanel().add(  4.                         &#

4、160;      xtype: view,  5.                                closable: true,  6.  &

5、#160;                             animate : true,  7.              

6、60;                 iconCls: 'icon-rights',  8.                         

7、       title: record.raw.menuName  9.                            );  此controller為MyApp.controller.event.B

8、ases，在才用Ext.require()加載指定文件時(shí)，只會(huì)通過(guò)網(wǎng)絡(luò)獲取此文件，即MyApp.controller.event.Bases.js文件，此時(shí)并未加載controller所依賴的model,store,view，此時(shí)還需要調(diào)用MyApp.getControoler()方法對(duì)所獲得的controller文件進(jìn)行初始化，調(diào)用其init()方法將加載所依賴的store,model和view文件。另外，通過(guò)查看Ext.app.Application的getController源碼：javascript view plain copy 1. getContro

9、ller: function(name)   2.        var me          = this,  3.            controllers = me.controllers, 

10、60;4.            className, controller;  5.   6.        controller = controllers.get(name);  7.   8.        if (!co

11、ntroller)   9.            className  = me.getModuleClassName(name, 'controller');  10.   11.            controller = 

12、Ext.create(className,   12.                application: me,  13.                id:      &

13、#160;   name  14.            );  15.   16.            controllers.add(controller);  17.   18.      &

14、#160;     if (me._initialized)   19.                controller.doInit(me);  20.              21.  &#

15、160;       22.   23.        return controller;  24.    ,  通過(guò)閱讀getController文件源碼，可看出：通過(guò)getController方法，首先獲得對(duì)應(yīng)controller對(duì)應(yīng)controller的className,然后通過(guò)Ext.create()方法創(chuàng)建controller，并將此contr

16、oller加入到對(duì)應(yīng)MyApp實(shí)例的controllers中，最重要的一點(diǎn)，然后調(diào)用controller.doInit()方法初始化controler,加載對(duì)應(yīng)的store，model,view文件以及調(diào)用init()方法，所以在單application下，可以簡(jiǎn)化動(dòng)態(tài)加載過(guò)程：javascript view plain copy 1. MyApp.getController('event.Bases').init();  為使Ext.Loader動(dòng)態(tài)加載開(kāi)啟，需進(jìn)行如下設(shè)置：javascript view plain

17、 copy 1. Ext.Loader.setConfig(  2.     enabled : true  3. );  2、多實(shí)例application首先以ExtJs 4.1版本進(jìn)行測(cè)試，在大系統(tǒng)下，可對(duì)業(yè)務(wù)進(jìn)行模塊劃分，各個(gè)模塊可以單獨(dú)創(chuàng)建application,當(dāng)需要加載指定模塊時(shí)，創(chuàng)建對(duì)應(yīng)的application,并加載其依賴文件，實(shí)現(xiàn)各個(gè)模塊的按需加載，相比一次性加載所有文件相比，系統(tǒng)的啟動(dòng)加載速度將提高。在加載各個(gè)模塊時(shí)，可以才用loade

18、r屬性或者加載iframe完成，在iframe用法中將會(huì)重復(fù)加載文件，這里不予介紹，下面主要介紹一下loader方法。  在ExtJs4.1 版本下，假定左邊為treepanel，右邊為tabpanel，點(diǎn)擊左邊的樹(shù)節(jié)點(diǎn)將分模塊加載對(duì)應(yīng)的application，并在右側(cè)的tabpanel中進(jìn)行顯示，當(dāng)點(diǎn)擊左側(cè)樹(shù)節(jié)點(diǎn)時(shí)，在其點(diǎn)擊相應(yīng)函數(shù)中添加：javascript view plain copy 1. panel = tab.add(Ext.create('Ext.panel.Panel',  

19、60;2.                id :  record.raw.id,  3.                title : record.raw.text,  4.   

20、60;            layout : 'fit',  5.                loader :   6.          

21、;          url : record.raw.url,  7.                    autoLoad : true,  8.       &#

22、160;            scripts : true  9.                ,  10.              

23、  autoShow : true,  11.                autoRender : true,  12.                tabTip : rec

24、ord.raw.text,  13.                border : false,  14.                renderTo : Ext.getBody(),  15.

25、                closable : true  16.            );  在loader屬性中，url為指定加載的html文件，如app/logApp/logList.html，在此html中引用此模塊對(duì)應(yīng)的js文件，其格式如下：html 

26、view plain copy 1. <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN">  2. <html>  3. <head>  4.   5.     <title></title>  6.   7.

27、</head>  8. <script type="text/javascript" src="app/logApp/logListApp1.js"></script>  9.   10. <body>  11. <div id="logpanel"></div>  12. </body>  13. &l

28、t;/html>  在html中增加<div>標(biāo)簽，作用是將此模塊創(chuàng)建的頁(yè)面渲染到此標(biāo)簽上，下面將會(huì)講到，如果沒(méi)有此標(biāo)簽，頁(yè)面將無(wú)法渲染，而且在一個(gè)系統(tǒng)下，各模塊的<div>的id必須為唯一。html所引用的js文件實(shí)例如下：javascript view plain copy 1. Ext.Loader.setConfig(  2.     enabled : true  3. );  4. &

29、#160; 5. Ext.application(   6.   7.     name : 'LogListApp',  8.     appFolder : 'app/logApp',  9.     autoCreateViewport : false,  10

30、.     controllers :  'log.LogInfos'  11.     ,  12.     launch : function()   13.         console.log('logListApp launch!&#

31、39;);  14.         Ext.create('Ext.panel.Panel',   15. /            html: '<p>World!</p>',  16.       

32、      renderTo: 'logpanel',  17.             items:  18.                 xtype: 'loginfo

33、list'  19.               20.         );  21.   22.       23. );  這此文件中創(chuàng)建application,然后引用對(duì)于對(duì)應(yīng)controller，以及創(chuàng)建頁(yè)面，通過(guò)rend

34、erTo將頁(yè)面渲染到<div>標(biāo)簽中，在ExtJs 4.1中可以采用Ext.create的方式創(chuàng)建app，MyApp作為全局application實(shí)例變量（命名空間），但在ExtJs4.1 中將存在一個(gè)嚴(yán)重問(wèn)題：新application的創(chuàng)建將覆蓋以前application注冊(cè)的事件監(jiān)聽(tīng)，監(jiān)聽(tīng)失效，這將是毀滅性的。通過(guò)測(cè)試，有兩種解決辦法：（1）、修改注冊(cè)監(jiān)聽(tīng)的注冊(cè)方式原事件注冊(cè)方式可能如下：javascript view plain copy 1. this.control(  2.     

35、;'viewport navigatorheader buttonaction=login':   3.         click: this.login  4.     )  修改注冊(cè)方式如下：javascript view plain copy 1. 'viewport':  2. 

36、0;      render: function(view)  3.            view.down('navigatorheader buttonaction=login').on('click',this.login);  4.          將頁(yè)面事件全部注冊(cè)到render的相應(yīng)函數(shù)中，這樣在ExtJs4.1版本下，各個(gè)模塊的事件將依然有效。（2）、引用ExtJs 4.2 版本事件失效可能是ExtJs4.1版本下的一個(gè)bug,在引用4.2版本后，無(wú)需修改事件的注冊(cè)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論