Google
技术积累 订阅所有技术积累的日志

轻松掌握ExtJs系列教程一：写在使用ExtJs之前

作者:GDNPC 日期:2009-05-22

字体大小: 小 中 大

使用ExtJs已经一个多月了，先简单说一下我的使用感受。

之所以选择使用ExtJs是被它的GridPanel所吸引，刚好近期有个任务需要使用复杂的Grid，因此没多想就选择了ExtJs。

刚开始一切很顺利，网上例子很多，东挪西凑一个漂亮的grid就出来了。但随着不断深入，麻烦也越来越多，在很多细节上，用ExtJs的确不是很方便，例如layout就是一个难点，我都现在都没有做出完美的效果。那段时期真的非常痛苦，很多次真想用传统的方法推倒重来。但ExtJs GridPanel的丰富功能的确令人难以割舍，况且我不想放弃这个学习ExtJs的大好机会，这次放弃了，以后相信就没多大机会能用上了。

做开发就和长跑一样，中间总会有段觉得辛苦而想放弃的阶段，但一旦撑过去，一切就显得海阔天空，游刃有余。以下是我做的grid，一行html都没写，全部用js来实现，一共写了1500多行js代码，几乎所有功能都用上了，碰到很多疑难杂症也一一解决，具体我已记录在《ExtJs疑难杂症》系列文章里。

这个项目，我只在一个页面使用了ExtJs，其他页面我还是使用JQuery。因为我觉得ExtJs的UI理念，不是短期内能适应的。ExtJs提倡UI层应该用js来实现，哪怕是一个dom对象，也应该通过js来生成而不应该直接写在html里。页面的布局类型，也封装在ExtJs里，用户不能自由调动页面布局，如非对ExtJs有深刻的理解，开发者很难随心所欲做出自己想要的界面。而且ExtJS是一个重量级js框架，大量使用很难保证IE的性能，个人觉得它只适用于局域网的OA系统，如果把它放在广域网，相信开发者会被一堆堆跨浏览器问题，异步调用问题，js调试问题而拖死。

我简单举个例子，ExtJs在实现一个alert功能时，会向客户端输出什么代码？

JavaScript代码
  1. Ext.onReady(function(){   
  2.    Ext.Msg.alert('bonjour','hello god!');   
  3. });  

用IE deveploer Toolbar查看页面的dom对象，发现代码是惊人的多！！

XML/HTML代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN">  
  2. <HTML><HEAD><TITLE></TITLE><LINK href="resources/css/ext-all.css" type="text/css" rel="stylesheet" />  
  3. <SCRIPT src="adapter/jquery/jquery.js" type="text/javascript">  
  4. </SCRIPT>  
  5. <SCRIPT src="adapter/jquery/ext-jquery-adapter.js" type="text/javascript">  
  6. </SCRIPT>  
  7. <SCRIPT src="ext-all.js" type="text/javascript">  
  8. </SCRIPT>  
  9. <SCRIPT type="text/javascript">  
  10.     
  11.     Ext.onReady(function(){   
  12.         Ext.Msg.alert('bonjour','hello god!');   
  13.     });   
  14.        
  15. </SCRIPT>  
  16. </HEAD><BODY class="  ext-ie ext-ie7 ext-border-box x-body-masked" id="ext-gen6">  
  17. <DIV class="x-window-proxy" id="ext-gen47" style="DISPLAY: none">  
  18. </DIV>  
  19. <DIV class="ext-el-mask" id="ext-gen48" style="DISPLAY: block; Z-INDEX: 9000; WIDTH: 1400px; HEIGHT: 534px" jQuery1243001417109="13">  
  20. </DIV>  
  21. <DIV class="x-ie-shadow" id="ext-gen72" style="DISPLAY: block; Z-INDEX: 9002; FILTER: progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius=4); LEFT: 635px; WIDTH: 104px; TOP: 211px; HEIGHT: 105px">  
  22. </DIV>  
  23. <DIV class="x-window x-window-plain x-window-dlg" id="ext-comp-1001" style="DISPLAY: block; Z-INDEX: 9003; LEFT: 640px; VISIBILITY: visible; WIDTH: 100px; POSITION: absolute; TOP: 214px" jQuery1243001417109="14">  
  24.  <DIV class="x-window-tl">  
  25.   <DIV class="x-window-tr">  
  26.    <DIV class="x-window-tc">  
  27.     <DIV class="x-window-header x-unselectable x-window-draggable" id="ext-gen7" style="MozUserSelect: none; KhtmlUserSelect: none" unselectable="on" jQuery1243001417109="3">  
  28.      <DIV class="x-tool x-tool-close" id="ext-gen52" style="DISPLAY: block" jQuery1243001417109="15">  
  29.           
  30.      </DIV>  
  31.      <SPAN class="x-window-header-text" id="ext-gen50">bonjour</SPAN>  
  32.     </DIV>  
  33.    </DIV>  
  34.   </DIV>  
  35.  </DIV>  
  36.  <DIV class="x-window-bwrap" id="ext-gen8">  
  37.   <DIV class="x-window-ml">  
  38.    <DIV class="x-window-mr">  
  39.     <DIV class="x-window-mc">  
  40.      <DIV class="x-window-body" id="ext-gen9" style="WIDTH: 88px; HEIGHT: auto">  
  41.       <DIV id="ext-gen59">  
  42.        <DIV class="ext-mb-icon x-hidden" id="ext-gen60">  
  43.        </DIV>  
  44.        <DIV class="ext-mb-content">  
  45.         <SPAN class="ext-mb-text" id="ext-gen61">hello god!</SPAN><BR />  
  46.         <DIV class="ext-mb-fix-cursor">  
  47.          <INPUT class="ext-mb-input" id="ext-gen62" style="DISPLAY: none" jQuery1243001417109="16" value="" /><TEXTAREA class="ext-mb-textarea" id="ext-gen64" style="DISPLAY: none"></TEXTAREA>  
  48.         </DIV>  
  49.        </DIV>  
  50.        <DIV class="x-progress-wrap x-hide-display" id="ext-comp-1006">  
  51.         <DIV class="x-progress-inner">  
  52.          <DIV class="x-progress-bar" id="ext-gen66" style="WIDTH: 0px; HEIGHT: 18px">  
  53.           <DIV class="x-progress-text " id="ext-gen67" style="Z-INDEX: 99; WIDTH: 0px">  
  54.            <DIV id="ext-gen69" style="WIDTH: 364px; HEIGHT: 18px">  
  55.                 
  56.            </DIV>  
  57.           </DIV>  
  58.          </DIV>  
  59.          <DIV class="x-progress-text x-progress-text-back" id="ext-gen68">  
  60.           <DIV id="ext-gen70" style="WIDTH: 364px; HEIGHT: 18px">  
  61.                
  62.           </DIV>  
  63.          </DIV>  
  64.         </DIV>  
  65.        </DIV>  
  66.        <DIV class="x-clear" id="ext-gen71">  
  67.        </DIV>  
  68.       </DIV>  
  69.      </DIV>  
  70.     </DIV>  
  71.    </DIV>  
  72.   </DIV>  
  73.   <DIV class="x-window-bl">  
  74.    <DIV class="x-window-br">  
  75.     <DIV class="x-window-bc">  
  76.      <DIV class="x-window-footer" id="ext-gen10">  
  77.       <DIV class="x-panel-btns-ct">  
  78.        <DIV class="x-panel-btns x-panel-btns-center">  
  79.         <TABLE cellSpacing="0">  
  80.          <TBODY>  
  81.           <TR>  
  82.            <TD class="x-panel-btn-td" id="ext-gen13">  
  83.             <TABLE class="x-btn-wrap x-btn  x-btn-focus" id="ext-comp-1002" style="WIDTH: 75px" cellSpacing="0" cellPadding="0" border="0" jQuery1243001417109="5">  
  84.              <TBODY>  
  85.               <TR>  
  86.                <TD class="x-btn-left">  
  87.                 <I> </I>  
  88.                </TD>  
  89.                <TD class="x-btn-center">  
  90.                 <EM unselectable="on"><BUTTON class="x-btn-text" id="ext-gen15" jQuery1243001417109="4">OK</BUTTON></EM>  
  91.                </TD>  
  92.                <TD class="x-btn-right">  
  93.                 <I> </I>  
  94.                </TD>  
  95.               </TR>  
  96.              </TBODY>  
  97.             </TABLE>  
  98.            </TD>  
  99.            <TD class="x-panel-btn-td x-hide-offsets" id="ext-gen21">  
  100.             <TABLE class="x-btn-wrap x-btn" id="ext-comp-1003" style="WIDTH: 75px" cellSpacing="0" cellPadding="0" border="0" jQuery1243001417109="7">  
  101.              <TBODY>  
  102.               <TR>  
  103.                <TD class="x-btn-left">  
  104.                 <I> </I>  
  105.                </TD>  
  106.                <TD class="x-btn-center">  
  107.                 <EM unselectable="on"><BUTTON class="x-btn-text" id="ext-gen23" jQuery1243001417109="6">Yes</BUTTON></EM>  
  108.                </TD>  
  109.                <TD class="x-btn-right">  
  110.                 <I> </I>  
  111.                </TD>  
  112.               </TR>  
  113.              </TBODY>  
  114.             </TABLE>  
  115.            </TD>  
  116.            <TD class="x-panel-btn-td x-hide-offsets" id="ext-gen29">  
  117.             <TABLE class="x-btn-wrap x-btn" id="ext-comp-1004" style="WIDTH: 75px" cellSpacing="0" cellPadding="0" border="0" jQuery1243001417109="9">  
  118.              <TBODY>  
  119.               <TR>  
  120.                <TD class="x-btn-left">  
  121.                 <I> </I>  
  122.                </TD>  
  123.                <TD class="x-btn-center">  
  124.                 <EM unselectable="on"><BUTTON class="x-btn-text" id="ext-gen31" jQuery1243001417109="8">No</BUTTON></EM>  
  125.                </TD>  
  126.                <TD class="x-btn-right">  
  127.                 <I> </I>  
  128.                </TD>  
  129.               </TR>  
  130.              </TBODY>  
  131.             </TABLE>  
  132.            </TD>  
  133.            <TD class="x-panel-btn-td x-hide-offsets" id="ext-gen37">  
  134.             <TABLE class="x-btn-wrap x-btn" id="ext-comp-1005" style="WIDTH: 75px" cellSpacing="0" cellPadding="0" border="0" jQuery1243001417109="11">  
  135.              <TBODY>  
  136.               <TR>  
  137.                <TD class="x-btn-left">  
  138.                 <I> </I>  
  139.                </TD>  
  140.                <TD class="x-btn-center">  
  141.                 <EM unselectable="on"><BUTTON class="x-btn-text" id="ext-gen39" jQuery1243001417109="10">Cancel</BUTTON></EM>  
  142.                </TD>  
  143.                <TD class="x-btn-right">  
  144.                 <I> </I>  
  145.                </TD>  
  146.               </TR>  
  147.              </TBODY>  
  148.             </TABLE>  
  149.            </TD>  
  150.           </TR>  
  151.          </TBODY>  
  152.         </TABLE>  
  153.         <DIV class="x-clear">  
  154.         </DIV>  
  155.        </DIV>  
  156.       </DIV>  
  157.      </DIV>  
  158.     </DIV>  
  159.    </DIV>  
  160.   </DIV>  
  161.  </DIV>  
  162.  <A class="x-dlg-focus" id="ext-gen45" href="file:///F:/Downloads/ext-2.2.1/example.htm#" jQuery1243001417109="12"> </A>  
  163. </DIV>  
  164. </BODY></HTML>  

这只是最简单的alert功能，可见华丽的效果不是三言两语可以完成的，上面就是个典型例子。

因此，在本教程开始之前，我奉劝大家在选择使用ExtJs之前一定要深思熟虑，一旦决定使用，就不要轻易放弃，ExtJs的确是一个优秀的框架，我们需要考虑的，是在开发成本，维护成本，IE性能和ExtJs强大华丽的功能之间作一个权衡。



[本日志由 GDNPC 于 2009-05-22 11:14 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: extjs js javascript 技术
相关日志:
评论: 0 | 引用: 0 | 查看次数: 1871
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 1000 字 | UBB代码 关闭 | [img]标签 关闭