ext mvc 动态加载

      ext是重型框架，在做项目的时候，我们经常面临性能问题，最明显的就是加载缓慢！由于项目亲身体会，我开始研究mvc的动态加载，也网上搜集过许多资料，包括ext官网提供的资料http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/guide/application_architecture，但是讲解的都不是我需要的，下面是我自己总结的，希望能帮助到需要的人。

       首先介绍下将要给大家展示的实例的场景：实例项目中有4个模块，分别是主界面（对应下去中的main），用户（对应下图中的user.List和user.EditWin)，记事本(对应下图中的user.NoteBook），测试模块（对应下图中的user.Test），我们想要的结果是用户打开界面时，看到的是主界面，系统只加载与主界面有关的js，当点击用户列表的时候，再加载用户模块的js文件，以此类推。下图是js结构：

如果我们按照下图中写我们的app.js

这样，在运行的时候，系统会一次性把所有需要的js文件全部加载到界面，如下图:

这里，虽然看上去也是用了mvc框架，实际上没有达到想要的效果。所以我们首先要做的是去掉主页中不需要的controls，models，stores等等，如下图：

这样就精简多了。再看一下加载效果

这个时候惊奇的发现，除了系统必要的文件外，请求的js只是主页中的Main.js这一个。接下来我们要点击‘userList’这个button来加载用户列表，来看看UsersControl的结构：

这里指明了用户模块所需要的全部js文件，再看看主页中的‘userList’这个button，看看是如何动态请求UsersControl的：

Button事件首先是调用Ext.require函数，像框架请求控制类UsersControl，接下来在回调函数中获得该控制类，var uc = application.getController('UsersControl')，这一步是必要的，确保该控制类运行环境完全建立。注意，这用了个全局变量application，他是Ext.app.application这个局部变量，所以要在之前就要把ext的这个局部变量赋值给全局变量application，这个动作要在app.js里完成，如下图：

之后，我们用var v = Ext.getCmp('userList')去获得用户列表，注意，如果是首次点击，因为还没有创建该组件，因此结果为undefined，要用v =Ext.widget('userList')去创建该组件，这样要求我们的组件必须要起别名，方便这里创建组件。uc.init(application)是调用控制类的初始化函数，如果没有，这里可以省略。我们来看看运行效果：

这里可以发现，后面的用户模块的js是点击后才动态加载的，其他的模块也是类似，这样就达到了按需所求的目的。