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

浏览数：29 / 时间：2015年06月09日

最近在适用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  });