Ext 4.2.1初次使用心得，包括一些不合理的地方帮助您少走弯路

我想很多人用Ext4X的时候都很纠结于他的ext-all.js 1.4MB的大小，但又对它拥有动态加载JS文件（按需加载）而高兴。以下我会告诉大家如何去规避ext-all.js，以及动态加载的优缺点。

　　首先，您要从官网上下载ext 4.2.1 http://www.sencha.com/products/extjs/download/，填写邮箱后在邮箱里查收下载。

　　然后再下载Sencha cmd，下载地址是http://www.sencha.com/products/sencha-cmd/download。

　　最后再下载Ruby，版本最好是1.9.3以下版本，下载地址http://rubyforge.org/frs/?group_id=167，这里就是ruby各版本的下载。

　　以下我将告诉大家为什么要下载这两个工具，以及他们的用途和使用方法。

1、Sencha Cmd

　　这个工具能帮助您创建基于Ext MVC思想的程序包，甚至还能够帮助您发布和编译Ext代码。当您安装成功后运行cmd，输入 “sencha help”，您就能看到如下画面：

　　

 

　　为了节约版面就剪切这一部分。那么这里面我们用到最多的就是app，generate和build这三个命令

　　app：执行各种应用程序构建过程。

　　generate：以models，controllers等模型或原始模板生成代码。

　　build：根据jsb3文件构建项目

　　这时候请通过命令行进入您下载解压后ext.4.2.1文件目录下，执行此命令：sencha generate app MyApp F:\scripts，这样就会自动创建在F盘scripts文件夹里一个名为MyApp的应用程序了，如下图所示：

　　


　　打开F盘后进入scripts文件夹内您就能看到生成后的文件，而mvc结构的文件就放在 该文件app/MyApp目录下，如下图所示：

　　


　　打开Index.html后你发现界面生成的很慢，如果这时候您打开调试器会发现浏览器在不停的动态加载js，如下图

　　

2、动态加载优点和缺点

　　优点：动态加载解决了一次加载过多JS文件的缺点。首次加载的响应速度就会很快。上图因为ext-dev的原因（不包含所有组件），导致他需要把所有的组件库全部加载出来才能正常运行，可以将ext-dev.js换成ext-all.js，但它也有存在的必要，后面我会告诉大家为什么。

　　缺点：动态加载的JS不会被缓存。也就是说动态加载虽然解决了首次加载的缺陷，但是在其他事件下比如点击事件动态加载需要的文件或类，同样的会影响到该事件的响应速度。大家可以在index.html页中做相关的测试，我这里就不发测试相关的验证了。

3、规避ext-all.js

　　没错，ext-all.js是可以不用调用的，如果您调用的是sencha cmd生成的开发方式，那开发完之后请用命令行进入F:\Scripts下并打开ruby.exe，执行如下命令：sencha app build。执行成功后打开Scripts\build\MyApp\production文件夹。如下图所示：

　　


　　此步骤就相关于是在发布您编写的ext，它会将所用到的JS导入到all-classes内，打开index.html后，你就只会看到all-classes.js的引用，当然，还有CSS，很惊喜html并没有调用ext-all.js，并且all-classes只有700kb。这就是我上面提到的ext-dev存在的必要性。请看下图：

　　

4、动态加载的注意事项

　　动态生成的JS文件如果包含中文就会出现乱码。如果你在meta 里做文章是没有任何作用的，将您建立的JS文件另存为.txt文本文件，同时修改编码为UTF-8，如下图所示

　　

5、总结

　　如果是大型项目，我还是介意将ext-dev换成ext-all.js，因为sencha app build是将所有的基本组件和您所需要的组件，以及编写的JS文件代码打包成了all-classes.js。如果您有很多个页面呢？所以要慎重的去判断。

　　尽量做到页面初次加载的时候不使用动态加载的机制，尽量在事件下去动态加载，但也别加载过多的JS文件，不然很有可能性能会大打折扣。

　　无论您采用什么样的方式开发，请调用build下的CSS文件，它通过sencha app build得到了优化，将很多png格式的图片改成了.gif。

　　好了，希望通过此文章能帮助您在Ext开发方式上，针对适合的项目制定明确的方案。

     cnblogs地址:http://www.cnblogs.com/WiYa/archive/2013/08/19/Ext.html