zoukankan      html  css  js  c++  java
  • Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法

    Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法

          最近在适用Ext JS4开发应用用的时候遇到了一个问题,前后考虑了很久并上网搜索了很多相关问题,都没有发现类似的问题的解决答案。今天早上过来上班的时候,突然想到了解决办法,现在拿出来给大家分享。虽然不是什么出众之比,但是希望在大家遇到这个类似的问题的时候有了参考。

         问题描述:我做的一个应用类似于官方http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#tree-grid这个例子。我们在treegrid中的树上增加了itemclick事件,同时呢treegrid的最后一列也是一个actioncolumn。这样冲突就来了,当你点击最后一列上的图标的时候,同时触发了树上的itemclick事件和treegrid事件。我尝试了适用“stopEvent()”“stopPropagation()”“return false”这些函数在handler里,但是都没有效果,问题依然没有解决。

          

         解决方案:在handler上增加“stopEvent()”“stopPropagation()”“return false”函数中的任何一个都没有效果以后,我把思考的角度放到了itemclick上去解决。无意中想到可以判断一下点击的表格的列的index,如果是tree所在的列那么就执行itemclick的监听事件,否则就不执行。好了,问题完美解决。

         核心代码:其中handler上的代码还跟原来一样不变,按照例子上的或者自己的需要去写。然后在tree上的监听事件要封装一层判断点击表格所在列的函数。如下:

        

    1 treeObj.addListener('itemclick', function(node, record, item, index, event, eOpts){
    2       //获取点击事件发生表格的所在列数
    3       var colIdx = event.getTarget('.x-grid-cell').cellIndex;
    4      //判断列数是否与tree所在列一致,然后执行下面函数
    5      if(colIdx == 0){
    6         //你的核心代码             
    7      }
    8  });

            好了,问题解决了。我觉得,有这样的问题发生是不是Ext JS本身没有在此做控制或者未发现的小bug。欢迎交流。

  • 相关阅读:
    SpringBoot之旅第三篇-日志
    SpringBoot之旅第二篇-配置
    SpringBoot之旅第一篇-初探
    394. 字符串解码
    1190. 反转每对括号间的子串
    921. 使括号有效的最少添加
    Leetcode 1171. 从链表中删去总和值为零的连续节点
    设计模式之过滤器模式——Java语言描述
    MySQL查询执行的基础
    设计模式之桥接模式——Java语言描述
  • 原文地址:https://www.cnblogs.com/front-Thinking/p/3549011.html
Copyright © 2011-2022 走看看