ExtJS 6.2如何避免ActionColumn触发多次事件？

我来帮你拆解下问题根源：你现在的代码里，ActionColumn的handler会主动触发itemdblclick事件，而双击ActionColumn区域时，会同时触发三个事件：

1. 行本身的itemdblclick事件（双击行触发）
2. ActionColumn的第一次单击，执行handler触发itemdblclick
3. ActionColumn的第二次单击（双击的第二次点击），再次执行handler触发itemdblclick
   三者叠加就导致了你的方法被调用三次。

下面给你两种实用的解决方案，你可以根据自己的代码习惯选择：

方案一：区分单击/双击事件，从根源避免重复触发 #

最清晰的方式是把ActionColumn的单击和行的双击事件分开处理，不要让ActionColumn的单击去触发行的双击事件。

首先修改ActionColumn的配置，把handler改成触发自定义事件，比如rwActionClick：

text: 'RW', 
dataIndex: 'readonly', 
hideable: false, 
sortable: false, 
width: 30,
handler: function(grid, rowIndex) { 
    var rec = grid.getStore().getAt(rowIndex); 
    grid.fireEvent('rwActionClick', grid, rec); // 自定义事件，和行双击区分开
}

然后在控制器里分开监听两个事件：

'grid': { 
    itemdblclick: this.openItem, // 行双击触发
    rwActionClick: this.openItem // ActionColumn单击触发
},

这样双击ActionColumn时，只会触发行的itemdblclick一次（因为双击是行的事件），而单击ActionColumn触发自定义事件，完全不会有重复触发的问题。如果希望双击ActionColumn也执行相同逻辑，那它只会触发一次行双击，刚好符合需求。

方案二：阻止事件冒泡+过滤重复触发 #

如果你不想改动事件体系，可以通过阻止ActionColumn区域的双击事件冒泡，同时在事件处理里加标记防止重复执行：

修改ActionColumn的配置，给它的单元格添加双击事件阻止：

text: 'RW', 
dataIndex: 'readonly', 
hideable: false, 
sortable: false, 
width: 30,
handler: function(grid, rowIndex) { 
    var rec = grid.getStore().getAt(rowIndex); 
    grid.fireEvent('itemdblclick', grid, rec); 
},
listeners: {
    dblclick: function(grid, td, cellIndex, record, e) {
        // 阻止双击事件冒泡到行，避免行的itemdblclick触发
        e.stopPropagation();
        // 手动触发一次动作即可
        this.openItem(grid, record);
    },
    scope: this // 确保scope指向你的控制器
}

同时在openItem方法里加个临时标记，防止短时间内重复调用：

openItem: function(grid, record) {
    // 用record的临时属性标记是否正在处理
    if (record._processing) return;
    record._processing = true;

    // 这里写你的业务逻辑
    // ...

    // 300ms后清除标记，不影响后续操作
    setTimeout(() => {
        delete record._processing;
    }, 300);
}

这样双击ActionColumn时，只会执行一次openItem，单击ActionColumn和双击其他行区域的逻辑也保持正常。

内容的提问来源于stack exchange，提问作者E.Scott