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。欢迎交流。
Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法