<![CDATA[Kelvin's ColorWorld]]> http://www.falaosao.net/ zh-cn PBlog2 v2.4 Kelvin's ColorWorld http://www.falaosao.net/images/logos.gif http://www.falaosao.net/ Kelvin's ColorWorld http://www.falaosao.net/default.asp?id=534 <![CDATA[ExtJs疑难杂症之菜单图标移位问题]]> GDNPC@163.com(GDNPC) Fri,05 Jun 2009 21:50:59 +0800 http://www.falaosao.net/default.asp?id=534 版本：2.2

症状：ExtJs号称是跨浏览器的，但CSS还是有点问题。例如菜单图标的移位问题就很闹心，我们公司使用的都是IE6，结果图标就变成这样了。

以下是extJs自带的example：

解决办法：用了很多办法都搞不定，由于我的系统是内部系统，只能在局域网访问，而且公司统一标装IE6.0，不用考虑别的浏览器。于是我打算修改ext-all.css文件。

打开ext-all.css文件，找到这里：

CSS代码
  1. .x-menu-item-icon{border:0 none;height:16px;padding:0;vertical-align:top;width:16px;position:absolute;left:0px;top:3px;margin:0;background-position:center;}  

改成：

CSS代码
  1. .x-menu-item-icon{border:0 none;height:16px;padding:0;vertical-align:top;width:16px;position:absolute;left:-25px;top:3px;margin:0;background-position:center;}  

OK，一切正常。

用chrome测一下，果然走样了，这种方法只在IE6下有效，大家注意了。

]]> http://www.falaosao.net/default.asp?id=533 <![CDATA[ExtJs疑难杂症之GridPanel单元格不能选中复制问题]]> GDNPC@163.com(GDNPC) Fri,05 Jun 2009 21:21:58 +0800 http://www.falaosao.net/default.asp?id=533 Ext.grid.GridPanel有一个重大缺陷，就是单元格的内容不能选中，没法选中就没法复制，给用户带来很多不便。

分析：用IE Developer Toolbar打开ExtJs输出的代码研究了一下，发现每个单元格的div都有一个属性：unselectable="on"，看来是css在作怪。

版本：2.2

解决办法：extJs官方论坛上有具体的解决办法，比较可行的如下。

step1：添加新的css样式。

CSS代码
  1. <style type="text/css">   
  2.     .x-selectable, .x-selectable * {   
  3.         -moz-user-select: text!important;   
  4.         -khtml-user-select: text!important;   
  5.     }   
  6. </style>  

step2：修改Ext.grid.GridPanel的protoType，我是自己写了一个新的js文件，记得要在ext-all.js后面引入。

JavaScript代码
  1. if (!Ext.grid.GridView.prototype.templates) {   
  2.     Ext.grid.GridView.prototype.templates = {};   
  3. }   
  4. Ext.grid.GridView.prototype.templates.cell = new Ext.Template(   
  5.     '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',   
  6.     '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',   
  7.     '</td>'  
  8. );  

done!现在GridPanel的单元格可以选中了。

]]> http://www.falaosao.net/default.asp?id=532 <![CDATA[泰国潘婷广告，长！]]> GDNPC@163.com(GDNPC) Sun,24 May 2009 15:44:51 +0800 http://www.falaosao.net/default.asp?id=532

泰国的潘婷广告，很长，大家当励志短片看好了

]]> http://www.falaosao.net/default.asp?id=531 <![CDATA[轻松掌握ExtJs系列教程二：使用Ext.Button组件 ]]> GDNPC@163.com(GDNPC) Sun,24 May 2009 10:55:29 +0800 http://www.falaosao.net/default.asp?id=531 本章介绍如何使用Ext.Button组件。如果大家使用IE的话建议安装IE Developer Toolbar，这样就能实时看到ext究竟生成了什么代码。不安装也可以，ext本身也自带了类似功能，下面例子就启用了debug功能。

效果如下图：

 

XML/HTML代码
  1. <html>  
  2. <head>  
  3.     <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />  
  4.     <script type="text/javascript" src="adapter/jquery/jquery.js"></script>  
  5.     <script type="text/javascript" src="adapter/jquery/ext-jquery-adapter.js"></script>  
  6.     <script type="text/javascript" src="ext-all-debug.js"></script>  
  7.     <script type="text/javascript">  
  8.     Ext.onReady(function(){   
  9.             Ext.QuickTips.init();   
  10.             var btn = new Ext.Button({   
  11.                 text:"hello button!",   
  12.                 allowDepress: true, //显示按钮按下效果，需要和enableToggle联合使用   
  13.                 enableToggle: true,  //为按钮添加开关效果   
  14.                 disabled: false, //是否禁用   
  15.                 hidden: false, //是否隐藏   
  16.                 hideMode: "display", //隐藏模式，默认是display，也可以使用visibility或offsets(visibility和display的区别是前者隐藏但保留位置，后者隐藏而不保留位置，后续元素会自动补位)   
  17.                 hideParent: false, //是否隐藏parent组件，例如一个button在一个div上，如果在隐藏button同时需要隐藏div，这个属性应该设为true   
  18.                 disabledClass: '', //按钮禁用时所使用的样式，默认是:x-item-disabled   
  19.                 id:"a", //就是id了，不给的话ext会自动赋值   
  20.                 menu:[   
  21.                     {text:"menu1",handler: function(){Ext.Msg.alert("menuinfo","this is menu1!");}},   
  22.                     {text:"menu2"},   
  23.                     {text:"menu3"}   
  24.                         ],   
  25.                 listeners: {//添加监听事件，如果有多个事件就要使用它，格式如下，用逗号分割。如果是click事件默认优先交给handler处理。   
  26.                     //"mouseover":function(){   
  27.                     //      Ext.Msg.alert('info','this is listeners!');   
  28.                     //}   
  29.                 },   
  30.                 tooltip: "gaga", //tooltip内容   
  31.                 tooltipType: "qtip", //tooltip类型，默认使用qtip，但使用前必须先初始化，留意第一行js。也可以使用title。   
  32.                 toggleGroup: "grouname",//给一组按钮添加开关效果，类似radio的效果，大家自己测试。   
  33.                 type: "button", //默认button，可以设为submit或reset。   
  34.                 renderTo: Ext.getBody()//指定显示容器，这里设为body，也可以设为某个div，使用容器id作为标示。   
  35.                 //handler: function(){Ext.Msg.alert('info','this is handler!')}   
  36.             });    
  37.                
  38.             function test(){   
  39.                 Ext.Msg.alert('onevent', 'this is test function!');   
  40.             }   
  41.                
  42.             //以下是两个比较重要的方法，大家自行测试   
  43.             //on用于添加instener   
  44.             btn.on("mouseover", test);   
  45.             //un用于删除listener   
  46.             btn.un("mouseover", test);   
  47.   
  48.                
  49.             //以下是常用事件   
  50.             //beforedestroy : ( Ext.Component this )    
  51.             //beforehide : ( Ext.Component this )    
  52.             //beforerender : ( Ext.Component this )    
  53.             //beforeshow : ( Ext.Component this )    
  54.             //beforestaterestore : ( Ext.Component this, Object state )    
  55.             //beforestatesave : ( Ext.Component this, Object state )    
  56.             //click : ( Button this, EventObject e )    
  57.             //destroy : ( Ext.Component this )    
  58.             //disable : ( Ext.Component this )    
  59.             //enable : ( Ext.Component this )    
  60.             //hide : ( Ext.Component this )    
  61.             //menuhide : ( Button this, Menu menu )    
  62.             //menushow : ( Button this, Menu menu )    
  63.             //menutriggerout : ( Button this, Menu menu, EventObject e )    
  64.             //menutriggerover : ( Button this, Menu menu, EventObject e )    
  65.             //mouseout : ( Button this, Event e )    
  66.             //mouseover : ( Button this, Event e )    
  67.             //render : ( Ext.Component this )    
  68.             //show : ( Ext.Component this )    
  69.             //staterestore : ( Ext.Component this, Object state )    
  70.             //statesave : ( Ext.Component this, Object state )    
  71.             //toggle : ( Button this, Boolean pressed )    
  72.                
  73.             //以下是常用方法   
  74.             //addClass( string cls ) : void    
  75.             //addEvents( Object object ) : void    
  76.             //addListener( String eventName, Function handler, [Object scope], [Object options] ) : void    
  77.             //applyToMarkup( String/HTMLElement el ) : void    
  78.             //cloneConfig( Object overrides ) : Ext.Component    
  79.             //destroy() : void    
  80.             //disable() : Ext.Component    
  81.             //enable() : Ext.Component    
  82.             //findParentBy( Function fcn, [Object scope] ) : Array    
  83.             //findParentByType( String/Class xtype ) : Container    
  84.             //fireEvent( String eventName, Object... args ) : Boolean    
  85.             //focus() : void    
  86.             //getEl() : Ext.Element    
  87.             //getId() : String    
  88.             //getItemId() : String    
  89.             //getText() : String    
  90.             //getXType() : String    
  91.             //getXTypes() : String    
  92.             //hasListener( String eventName ) : Boolean    
  93.             //hasVisibleMenu() : Boolean    
  94.             //hide() : Ext.Component    
  95.             //hideMenu() : void    
  96.             //initComponent() : void    
  97.             //isVisible() : void    
  98.             //isXType( String xtype, [Boolean shallow] ) : void    
  99.             //on( String eventName, Function handler, [Object scope], [Object options] ) : void   
  100.             //purgeListeners() : void //删除所有事件监听   
  101.             //relayEvents( Object o, Array events ) : void    
  102.             //removeClass( string cls ) : void    
  103.             //removeListener( String eventName, Function handler, [Object scope] ) : void    
  104.             //render( [Element/HTMLElement/String container], [String/Number position] ) : void    
  105.             //resumeEvents() : void   //恢复所有事件监听   
  106.             //setDisabled( Boolean disabled ) : void    
  107.             //setHandler( Function handler, [Object scope] ) : void    
  108.             //setIconClass( String cls ) : void    
  109.             //setText( String text ) : void    
  110.             //setVisible( Boolean visible ) : Ext.Component    
  111.             //show() : Ext.Component    
  112.             //showMenu() : void    
  113.             //suspendEvents() : void  //取消所有事件监听，但handler继续有效   
  114.             //toggle( [Boolean state] ) : void    
  115.             //un( String eventName, Function handler, [Object scope] ) : void  //删除某个事件监听，使removeListener的缩写   
  116.     });   
  117.     </script>  
  118. </head>  
  119. <body>  
  120.     <a href="#" onclick="Ext.log('Hello from the Ext console.');return false;">debug</a> //启用debug窗口   
  121. </body>  
  122. </html>  

 

]]> http://www.falaosao.net/default.asp?id=530 <![CDATA[轻松掌握ExtJs系列教程一：写在使用ExtJs之前]]> GDNPC@163.com(GDNPC) Fri,22 May 2009 23:06:46 +0800 http://www.falaosao.net/default.asp?id=530 使用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强大华丽的功能之间作一个权衡。

]]> http://www.falaosao.net/default.asp?id=529 <![CDATA[to be a iron man]]> GDNPC@163.com(GDNPC) Wed,20 May 2009 20:06:48 +0800 http://www.falaosao.net/default.asp?id=529

还真有人搞出一套iron man Mark III Ver 2装备出来。

外形很逼真，只是穿的人应该减肥了

穿着他不知能接住多少口径的穿甲弹~

]]> http://www.falaosao.net/default.asp?id=528 <![CDATA[食王笔记]]> GDNPC@163.com(GDNPC) Tue,19 May 2009 16:03:56 +0800 http://www.falaosao.net/default.asp?id=528

在死亡笔记中写上某个人的死因和死亡时间

某人就会死得其所

而食王笔记的用法就简单多

字都省了，直接撕下扔锅里，上菜！

它每一页都嵌入适当比例的调味料，即撕即用，不知道直接泡水喝味道怎样。

]]> http://www.falaosao.net/default.asp?id=527 <![CDATA[高空摄影150]]> GDNPC@163.com(GDNPC) Tue,19 May 2009 15:53:17 +0800 http://www.falaosao.net/default.asp?id=527 不识庐山真面目，只缘身在此山中。

如果站得更高，看到的远不止是庐山~

以下150幅照片是两位不知名摄影师的作品

通过他们，你或许能以上帝的眼光俯瞰全世界。

图片太多了，请大家移步到这里观看

http://kaiak.tw/?p=7717

]]> http://www.falaosao.net/default.asp?id=526 <![CDATA[Monkey Majik：ただ、ありがとう]]> GDNPC@163.com(GDNPC) Thu,14 May 2009 08:20:42 +0800 http://www.falaosao.net/default.asp?id=526 某日在MTV认识了一组日本的混血band，不错，发段最新MV出来。喜欢的朋友可以去emule一下~

]]> http://www.falaosao.net/default.asp?id=525 <![CDATA[ExtJs疑难杂症之ComboBox选项filter问题]]> GDNPC@163.com(GDNPC) Tue,12 May 2009 21:51:30 +0800 http://www.falaosao.net/default.asp?id=525 如果有多个同类型的ComboBox，个人觉得最好的加载方法是加载一个store，然后通过filter方法筛选出需要的选择项，这样切换ComboBox就不用请求单独的store了。但这里似乎又有点问题。

版本：2.2

症状：

如以下代码所示，store执行filter后ComboBox的选项并不会改变，但打印store.getCount()时发现选项数目已经发生变化，只是ComboBox没展示出来。

Java代码
  1. var comboBoxFilter = new Ext.form.ComboBox({   
  2.         store: basekeyStore,   
  3.         displayField: "basekeyName",   
  4.         valueField: "basekeyID",   
  5.         typeAhead: true,   
  6.         mode: 'local',   
  7.         forceSelection: true,   
  8.         triggerAction: 'all',   
  9.         selectOnFocus:true,   
  10.         lazyRender:true  
  11.     });   
  12.   
  13. basekeyStore.filter("basekeyTypdID", "3");//使用filter  

根据官方解释：ComboBox有内建的filter方法，因此会冲掉你设在store上的filter。

解决办法：在store执行完filter后，先把原来snapshot保存起来，然后再把filter出来的结果覆盖原来的snapshot。还原时把原来的snapshot还原回来，然后再clearfilter。

代码如下：

先写两个function用于filter的增删，实现思想如上所述。

JavaScript代码
  1. function clearBasekeyStoreFilter(){//清除filter函数   
  2.         basekeyStore.snapshot = basekeyStore.realSnapshot;   
  3.         delete basekeyStore.realSnapshot;   
  4.         basekeyStore.clearFilter();   
  5.     }   
  6.        
  7. function createBasekeyStoreFilter(typeid){//创建filter函数   
  8.         basekeyStore.filter('basekeyTypeID', typeid);   
  9.         basekeyStore.realSnapshot = basekeyStore.snapshot;   
  10.         basekeyStore.snapshot = basekeyStore.data;   
  11.     }  

ComboBox正常绑定即可，但需要找时机创建和删除filter，我选择在expand和collapse事件中处理。

 

Java代码
  1. var comboBoxFilter = new Ext.form.ComboBox({   
  2.         store: basekeyStore,   
  3.        displayField: "basekeyName",   
  4.        valueField: "basekeyID",   
  5.        typeAhead: true,   
  6.        mode: 'local',   
  7.        forceSelection: true,   
  8.        triggerAction: 'all',   
  9.        selectOnFocus:true,   
  10.        lazyRender:true  
  11. });   
  12.        
  13. comboBoxFilter.on('expand',    
  14.     function(){   
  15.         createBasekeyStoreFilter('3');//ComboBox展开时提供filter条件执行filter   
  16.     }   
  17. );   
  18.        
  19. comboBoxFilter.on('collapse', function(){   
  20.         clearBasekeyStoreFilter();//ComboBox收拢时清理filter。   
  21.     }   
  22. );  
]]>