现在的位置: 首页 > easyui > Form > combo > 正文
combo组件点击控件之外区域时不能触发onHidePanel问题
2013年02月20日 combo ⁄ 共 1164字 评论数 3 ⁄ 被围观 12,756 views+
文章目录
[隐藏]

现象描述:

对于combo组件以及依赖combo组件的combobox,combotree,combogrid等组件都有这个功能:在控件所在区域之外页面任意处按下鼠标时,控件的下拉面板会自动隐藏,问题是虽然下拉面板被隐藏了,但是却没有触发onHidePanel事件,为什么没有触发,我们对源码稍作分析就知道了。

原因分析:

combo组件其实是在document上委托了事件处理程序,我们来看代码片段:

  1. $(document).unbind(".combo").bind("mousedown.combo"function(e) {   
  2.     var panels = $("body>div.combo-p>div.combo-panel");   
  3.     var p = $(e.target).closest("div.combo-panel", panels);   
  4.     if(p.length) {   
  5.         //如果mousedown事件发生在下拉面板内,则不做任何操作    
  6.         return;   
  7.     }   
  8.     //关闭面板    
  9.     panels.panel("close");   
  10. });  

很明显combo在document上委托了mousedown事件处理程序,命名控件为"combo",事件处理程序内部会关闭下拉面板,而关闭面板的时候使用的是panel组件的close方法,panel组件的close方法并不会触发onHidePanel事件,整个源代码触发onHidePanel事件的地方只有一个:

  1. /**  
  2.  * 内部隐藏下拉面板的接口,这个没什么可说的,预留了一个onHidePanel事件接口  
  3.  */  
  4. function hidePanel(target) {   
  5.     var opts = $.data(target, "combo").options;   
  6.     var panel = $.data(target, "combo").panel;   
  7.     panel.panel("close");   
  8.     opts.onHidePanel.call(target);   
  9. };  

解决方案:

分析到这里已经很清楚为什么这种情况不会触发onHidePanel事件了。那么我们要想触发该事件怎么办呢?其实很简单,在combo组件实例化完成后,我们通过给下拉面板的panel组件注册onClose事件,也就是用panel组件的onClose事件代替combo组件的onHidePanel事件:

  1. $('comboId').combobox('panel').panel({   
  2.     onClose:function(){   
  3.         //TODO   
  4.     }   
  5. })  

目前有 3 条留言 其中:访客:2 条, 博主:1 条

  1. xiaozhu : 2013年05月22日20:54:55  -49楼 @回复 回复

    初始化事件叫什么?

  2. xiaozhu : 2013年05月23日10:33:37  -48楼 @回复 回复

    按你代码设置之后,显示和关闭都会执行,为什么??~~~
    $(‘#x_names’).combogrid(‘panel’).panel({
    onClose:function(){
    alert(“~~”);
    }
    })


    • 管理员
      世纪之光 : 2013年05月23日17:40:42  地下1层 @回复 回复

      显示是不会执行的。
      另外,作者在1.3.3的版本中已经修复了这个Bug了,你更新到1.3.3版本就可以解决问题。

给我留言

留言无头像?


×