ExtJs按需动态加载(多app模式)

1、ExtJs 按需动态加载（多app模式）在Extjs中，为了满足动态加载js文件的过程，经过本人测试，可采用以下两种方式：javascriptview plaincopy1. 1、在一个application实例下在此情况下，可采用Ext.require()函数进行动态按需加载js文件。以加载一个controller为例：javascriptview plaincopy1. Ext.require(MyApp.controller.event.Bases,function()2. MyApp.getController(event.Bases).init();3. tab=me.getTabp

2、anel().add(4. xtype:view,5. closable:true,6. animate:true,7. iconCls:icon-rights,8. title:record.raw.menuName9. );此controller为MyApp.controller.event.Bases，在才用Ext.require()加载指定文件时，只会通过网络获取此文件，即MyApp.controller.event.Bases.js文件，此时并未加载controller所依赖的model,store,view，此时还需要调用MyApp.getControoler()方法对所获得的co

3、ntroller文件进行初始化，调用其init()方法将加载所依赖的store,model和view文件。另外，通过查看Ext.app.Application的getController源码：javascriptview plaincopy1. getController:function(name)2. varme=this,3. controllers=me.controllers,4. className,controller;5. 6. controller=controllers.get(name);7. 8. if(!controller)9. className=me.getMo

4、duleClassName(name,controller);10. 11. controller=Ext.create(className,12. application:me,13. id:name14. );15. 16. controllers.add(controller);17. 18. if(me._initialized)19. controller.doInit(me);20. 21. 22. 23. returncontroller;24. ,通过阅读getController文件源码，可看出：通过getController方法，首先获得对应controller对应cont

5、roller的className,然后通过Ext.create()方法创建controller，并将此controller加入到对应MyApp实例的controllers中，最重要的一点，然后调用controller.doInit()方法初始化controler,加载对应的store，model,view文件以及调用init()方法，所以在单application下，可以简化动态加载过程：javascriptview plaincopy1. MyApp.getController(event.Bases).init();为使Ext.Loader动态加载开启，需进行如下设置：javascript

6、view plaincopy1. Ext.Loader.setConfig(2. enabled:true3. );2、多实例application首先以ExtJs 4.1版本进行测试，在大系统下，可对业务进行模块划分，各个模块可以单独创建application,当需要加载指定模块时，创建对应的application,并加载其依赖文件，实现各个模块的按需加载，相比一次性加载所有文件相比，系统的启动加载速度将提高。在加载各个模块时，可以才用loader属性或者加载iframe完成，在iframe用法中将会重复加载文件，这里不予介绍，下面主要介绍一下loader方法。 在ExtJs4.1 版本下，

7、假定左边为treepanel，右边为tabpanel，点击左边的树节点将分模块加载对应的application，并在右侧的tabpanel中进行显示，当点击左侧树节点时，在其点击相应函数中添加：javascriptview plaincopy1. panel=tab.add(Ext.create(Ext.panel.Panel,2. id:record.raw.id,3. title:record.raw.text,4. layout:fit,5. loader:6. url:record.raw.url,7. autoLoad:true,8. scripts:true9. ,10. auto

8、Show:true,11. autoRender:true,12. tabTip:record.raw.text,13. border:false,14. renderTo:Ext.getBody(),15. closable:true16. );在loader属性中，url为指定加载的html文件，如app/logApp/logList.html，在此html中引用此模块对应的js文件，其格式如下：htmlview plaincopy1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 在html中增加标签，作用是将此模块创建的页面渲染到此标签上，下面将会讲到

9、，如果没有此标签，页面将无法渲染，而且在一个系统下，各模块的的id必须为唯一。html所引用的js文件实例如下：javascriptview plaincopy1. Ext.Loader.setConfig(2. enabled:true3. );4. 5. Ext.application(6. 7. name:LogListApp,8. appFolder:app/logApp,9. autoCreateViewport:false,10. controllers:log.LogInfos11. ,12. launch:function()13. console.log(logListApp

10、launch!);14. Ext.create(Ext.panel.Panel,15. /html:World!,16. renderTo:logpanel,17. items:18. xtype:loginfolist19. 20. );21. 22. 23. );这此文件中创建application,然后引用对于对应controller，以及创建页面，通过renderTo将页面渲染到标签中，在ExtJs 4.1中可以采用Ext.create的方式创建app，MyApp作为全局application实例变量（命名空间），但在ExtJs4.1 中将存在一个严重问题：新application的创

11、建将覆盖以前application注册的事件监听，监听失效，这将是毁灭性的。通过测试，有两种解决办法：（1）、修改注册监听的注册方式原事件注册方式可能如下：javascriptview plaincopy1. this.control(2. viewportnavigatorheaderbuttonaction=login:3. click:this.login4. )修改注册方式如下：javascriptview plaincopy1. viewport:2. render:function(view)3. view.down(navigatorheaderbuttonaction=logi

12、n).on(click,this.login);4. 将页面事件全部注册到render的相应函数中，这样在ExtJs4.1版本下，各个模块的事件将依然有效。（2）、引用ExtJs 4.2 版本事件失效可能是ExtJs4.1版本下的一个bug,在引用4.2版本后，无需修改事件的注册方式即可使用，但application的创建方式放生改变，如果还是调用Ext.create(Ext.app.applicaton,)方式无法实例化application ，需要改变其创建方式，在4.2版本的文档中推荐如下方式进行创建:javascriptview plaincopy1. Ext.application(2. name:MyApp,3. launch:function()4. Ext.create(Ext.container.Viewport,5. items:6. html:MyApp7. 8. );9. 10. );那么通过如下方法可以获得对应的application 实例：javascriptview plaincopy1. varapp=MyApp