﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-冰是睡着的水-文章分类-EXTJS</title><link>http://www.blogjava.net/cookie731/category/51754.html</link><description>青青子衿, 悠悠我心, 但为君故, 沉吟至今
</description><language>zh-cn</language><lastBuildDate>Tue, 19 Jun 2012 10:44:54 GMT</lastBuildDate><pubDate>Tue, 19 Jun 2012 10:44:54 GMT</pubDate><ttl>60</ttl><item><title>(转)ExtJs开发总结</title><link>http://www.blogjava.net/cookie731/articles/378627.html</link><dc:creator>冰是睡着的水</dc:creator><author>冰是睡着的水</author><pubDate>Sun, 20 May 2012 13:50:00 GMT</pubDate><guid>http://www.blogjava.net/cookie731/articles/378627.html</guid><wfw:comment>http://www.blogjava.net/cookie731/comments/378627.html</wfw:comment><comments>http://www.blogjava.net/cookie731/articles/378627.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/cookie731/comments/commentRss/378627.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/cookie731/services/trackbacks/378627.html</trackback:ping><description><![CDATA[<div><h2><span class="Apple-style-span" style="font-size: 14px; font-weight: normal; ">http://www.cnblogs.com/beginor/archive/2008/12/14/1354922.html</span></h2><div><div id="cnblogs_post_body"> <p>不知不觉2008已经走到了尽头，在这近一年中，一直不断的尝试用ExtJS做项目，从1.1到现在的2.2，吃了不少苦头，也有不少收获，总结一下，一起分享！  </p><p>1.  <strong>ExtJS的定位是RIA，和Prototype、jQuery等类库的定位不同</strong>。使用ExtJS做开发，就是意味着以客户端开发为主，不然就不叫RIA框架了，而Prototype、jQuery等只是辅助性的客户端框架，和ExtJS不在同一条起跑先上。如果一定要和其它的框架做比较的话，应该和<a href="http://www.smartclient.com/" target="_blank">Isomorphic SmartClient</a>、<a href="http://www.backbase.com/" target="_blank">Backbase Enterprise  Ajax</a>之类的框架做比较，当然，和他们相比，ExtJS还是有很大的优势的。</p> <p>2.  <strong>使用ExtJS时需要解决如何服务端通信的问题</strong>。由于ExtJS只是一个客户端的框架，和服务端技术没有关系，也就没有相应的服务端的适配层，因此客户端如果要用ExtJS，则必须提供它需要的数据结构。ExtJS主要通过这几种方式和服务端进行通信：  </p> <ul> <li><strong>Ext.Ajax.request</strong> 做普通的异步请求，服务端可以根据实际情况返回JSON形式数据或者HTML片段；  </li> <li><strong>Ext.tree.TreeLoader</strong>  加载树形结构，服务端必须返回JSON形式数据，而且要符合Ext.tree.TreeNode的配置要求，否则自己做转换； </li> <li><strong>Ext.data.Store及其派生类</strong>  加载表格形式的数据，服务端可以根据实际情况返回JSON形式数据或者XML形式数据，如果没有特殊要求，推荐返回JSON格式的数据； </li> <li><strong>Ext.Element.update</strong>  局部更新，这个方法最总还是要调用Ext.Ajax.request方法，之所以把它单独列出来，是因为这种方式比较容易被忽视，但是在某些情况下还是挺  有用的，比如调用Ext.Panel.body.update()对某个Ext.Panel的内容进行局部更新，如果使用这种方式，那么服务端只能相应的  返回HTML片段了；</li></ul> <p>3.  <strong>使用ExtJS时的注意事项</strong>。ExtJS和其它的辅助性类库(Prototype、jQuery等)相比显得非常庞大，让很多很多初学者望而却步。经过近一年的学和用，对于ExtJS的使用，我总结了一下几个注意事项：  </p> <ul> <li><strong>尽量使用ExtJS的方言</strong>。  ExtJS提供了很多有用的方法，解决客户端JavaScript常见的开发任务，常见的有查询HTMLDom，创建HTML元素，为HTML元素注册事件响应函数等，这些大可以全部使用ExtJS提供的方法，使自己代码构建与ExtJS之上，举几个例子：   <ul> <li>查询ID为container的DIV下所有的checkbox，可以使用：<span style="font-family: Courier New; color: #ff8000">Ext.fly(&#8216;container&#8217;).select(&#8216;input[type=checkbox]&#8217;);</span>  </li> <li>在ID为container的DIV内创建一个按钮，可以使用：<span style="font-family: Courier New; color: #ff8000">Ext.fly(&#8216;container&#8217;).createChild({  tag: &#8216;input&#8217;, type: &#8216;button&#8217;});</span> </li> <li>为ID为container的DIV的click事件注册处理函数，使用：<span style="font-family: Courier New; color: #ff8000">Ext.fly(&#8216;container&#8217;).on(&#8216;click&#8217;,  handlerFn, scope);</span></li></ul></li> <li><strong>ExtJS的自定义事件很好用</strong>，可以实现一对多的通知，而且任何自定义事件都可以中途停止，只要有一个处理函数返回false。  </li> <li><strong>Store合并成一个文件</strong>  用ExtJS显示数据，自然就需要用到Ext.data.Store及其派生出来的类，可以考虑所有的Store合并到一个文件，这样对重用有很大的帮助。 </li> <li><strong>脚本文件管理</strong> 尽可能的每个模块做成一个类，一个类一个文件，类似与Java或C#  的文件处理方法，每个文件注明其作用，依赖的文件等，如果太多的话可以考虑写一个配置文件，通过读配置文件来输出脚本到客户端。 </li> <li><strong>调试和部署分别加载Debug和Release版本的脚本</strong>  ExtJS附带的例子中没有使用完整Debug版本的例子，所以很多人找不到完整的Debug版本的引用顺序，通过对Source文件夹下的ext.jsb文件进行分析，就可以得到正确的加载顺序，如下：   <ul> <li>Debug  <ol> <li>/ext-path/source/core/ext.js </li> <li>/ext-path/source/adapter/ext-base.js </li> <li>/ext-path/ext-all-debug.js</li></ol></li> <li>Release  <ol> <li>/ext-path/adapter/ext/ext-base.js </li> <li>/ext-path/ext-all.js</li></ol></li></ul></li> <li><strong>对Script进行压缩</strong>  对项目中有大量的JavaScript的话，对其进行压缩是很有必要的，这里我推荐的是ExtJS的论坛提供的<a href="http://extjs.com/forum/showthread.php?t=7490" target="_blank">JS  Builder</a>，可以通过配置文件来对Script和CSS进行压缩，据说ExtJS就是用这个工具进行压缩的，不过有一个缺点，就是不支持UTF-8编码。</li></ul> <p>&nbsp;</p> <p>4. <strong>ExtJS的优点和缺点总结</strong>。经过近一年的尝试，ExtJS的优缺点总结如下： </p> <ul> <li>优点  <ul> <li><strong>一致的类库</strong>  这点在1.1版本时还不是很完善，但是到了2.0以后，ExtJS内部经过了翻天覆地的变化，特别是UI组件，有统一的基类，给人的感觉很像是一个运行在浏览器上的运行时框架，这一点只有在对ExtJS熟练了之后才能体会到。  </li> <li>&nbsp;<strong>托管页面呈现</strong>  ExtJS在发展到2.0之后，不仅UI类库一致了，而且渲染方式也是统一的，用官方的话说，是Managed  Rendering，这一点使得UI的扩展也比较一致，有利于以后的维护与发展。 </li> <li><strong>相对丰富的文档和示例</strong>  毫无疑问，刚刚接触到ExtJS的人多数都是被它附带的例子和开发文档吸引过去的，它的文档做的确实不错。 </li> <li><strong>华丽而成熟的界面</strong> ExtJS在2.0之后的界面真的是没得说，不仅华丽，而且相对很成熟。</li></ul></li> <li>缺点  <ul> <li><strong>没有合适的开发利器</strong>  毫无疑问，一个好的开发工具可以大大的提高编码的速度，但是对于ExtJS，始终没有一个完美的开发工具，可以推荐的有<a href="http://www.aptana.com/" target="_blank">Aptana Studio</a>， <a href="http://www.spket.com/" target="_blank">Spket IDE</a>，和<a href="http://www.spket.com/ext-intellisense-visual-studio.html" target="_blank">Spket 提供的提示文件</a>，但是都是各有优缺点，都不完美，只能一边看SDK一边写代码。 </li> <li><strong>没有界面设计工具</strong> 虽然有人提供了一个<a href="http://www.tof2k.com/ext/formbuilder/" target="_blank">在线的界面设计工具</a>，但是和Visual  Studio提供的ASP.Net设计工具来说，真的可以说是天壤之别。因此，只能一边预览，一边写代码。 </li> <li><strong>文档不全</strong>  虽然ExtJS提供的文档很丰富，但是还是跟不上源代码的更新速度，所以，经常要通过看源代码，调试才能真正解决问题。 </li> <li><strong>不能编译</strong>  这一点可以说是JavaScript的缺点（如果能编译，就不叫JavaScript了），在实际的开发中，经常会敲错一些代码，比如大小写错误等，不能通过编译得到反馈，只能在运行时排错，导致开发的效率比较低下。</li></ul></li></ul> <p>5. <strong>使用ExtJS做应用的一些建议</strong>。多数人认为ExtJS的脚本体积很大，不适合放到互联网上，对于这一点，有如下建议：  </p> <ol> <li>部署到互联网上的Web应用一定要加载Release版本的ExtJS </li> <li>可以考虑只加载必须的组件，build目录下脚本文件都是压缩过的，如果项目中用到的ExtJS的组件不是很多，可以只加载用到的 </li> <li>考虑使用IIS的文件压缩功能 </li> <li>使用Google的Gears，把所有的静态文件做客户端缓存 </li> <li>使用ADOBE的AIR，把脚本打包到客户端运行</li></ol> <p>&nbsp;</p> <p>总的来说，ExtJS是一个不错的框架，它陪伴我走过了精彩的2008，也许在未来的2009，我会转向其它的RIA技术，但是我至少会继续关注ExtJS，同时也希望这个框架能够顽强的生存下去。</p> <p>PS，共享一些学习资料：</p> <ul> <li><a href="http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0_%28Chinese%29" target="_blank">ExtJS 2.0 简介</a> （推荐反复阅读，细细体会） </li> <li><a href="http://extjs-ux.org/" target="_blank">ExtJS的用户扩展合集</a> （推荐常去看看） </li> <li><a href="http://extjs.com/learn/Tutorial:Writing_a_Big_Application_in_Ext" target="_blank">如何用ExtJS构建大型应用</a> （可以说是做ExtJS开发的指导思想） </li> <li><a href="http://files.cnblogs.com/beginor/Ext-2.0-class-map.zip" target="_blank">ExtJS 2.0 类库的脑图</a> （可以加深对ExtJS类库的继承关系的理解）</li></ul></div></div></div> <img src ="http://www.blogjava.net/cookie731/aggbug/378627.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/cookie731/" target="_blank">冰是睡着的水</a> 2012-05-20 21:50 <a href="http://www.blogjava.net/cookie731/articles/378627.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>