extjs - 如何在 Ext Js 树中检查更改时防止 itemclick 事件

Question

我在 Ext.tree.Panel 中添加了两个侦听器“检查更改”和“项目单击”。但我注意到，当检查更改发生时，它也会触发项目单击事件。我希望阻止这个项目的点击事件。

    listeners : {
        checkchange: function(node, checked, eOpts){
            alert('this is check change');
        },
        itemclick : function(obj, record, item, index, e, eOpts){
            alert('this is item click');
        }
    }

这是 Ext 树中的侦听器。在检查更改时，我希望仅收到“这是检查更改”此警报。怎么可能？

Answer 1

您可以使用事件 getTarget 方法来检查复选框的 DOM。完整的解决方案如下：

onItemClick: function( self, record, item, index, eventObj, eOpts ) {
    var colIdx = eventObj.getTarget('.x-grid-cell').cellIndex;

    if (colIdx===0) { // Apply item event click to the first column only
        var node=self.getTreeStore().getNodeById(record.internalId);

        if (!eventObj.getTarget('.x-tree-checkbox',1,true)) {
            record.set('checked',!record.get('checked'));               
            this.fireEvent('checkchange', node, record.get('checked'));
        }
    } 
}

Answer 2

蹩脚的解决方案！我只能将脚本限制为“itemclick”。在 ExtJs 5.1.1 中运行良好，并且可能在 CSS 复选框类名称为“x-tree-checkbox”的所有版本中运行良好

listeners : {
    itemclick : function(panel, record , item , index, event){
        var clazz = '';
        if(event.target.classList != null){
            clazz = event.target.classList[0];
        }
        if(clazz != 'x-tree-checkbox'){
            ...
        }
    }
}

Answer 3

如果您单击复选框以更改其值，则 itemclick 事件将始终在 checkchange 事件之前触发。如果您不希望 itemclick 事件发生任何事情，只需不要定义它（删除侦听器）。

Answer 4

您是否尝试过实现“beforeitemclick”事件？当您单击该项目时它会触发，并且在此处理程序中您可以实现 checkchange。