How to prevent itemclick event on check change in

Question

I added two listeners 'check change' and 'item click' in Ext.tree.Panel. But i noticed that, when ever the check change occurs then it is also triggering item click event also. I wish to prevent this item click event.

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

This are the listeners in Ext tree. On check change i wish to get 'this is check change' this alert only. How it is possible ?

Answer 1

You can use event getTarget method to check DOM of the checkbox. The complete solution is below:

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

If you are clicking the checkbox to change its value the itemclick event will always fire before the checkchange event. If you dont wish for anything to happen on the itemclick event, simply dont define it (remove the listener).

Answer 3

Lame solution ! I was able to limit the script only to the 'itemclick'. Works well in ExtJs 5.1.1 and probably in all versions where css checkbox class name is '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 4

Have you tried to implement the 'beforeitemclick' event? it fires when you click the item, and inside this handler you can implement the checkchange.