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。欢迎交流。