How to prevent itemclick event when validation change in Ext Js Tree

Question

I added two changes “Check checks” and “click on an item” in Ext.tree.Panel. But I noticed that when a check is changed, it also triggers an element click event. I want to prevent this element 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'); } } 

These are listeners in the Ext-tree. When changing a check, I want to receive only this warning. How is this possible?

Answer 1

You can use the getTarget method to check the DOM of this flag. 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

Lame Solution! I was able to restrict the script to only "itemclick". Works well in ExtJs 5.1.1 and probably in all versions where the 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 3

If you check the box to change its value, the itemclick event will always fire before the checkchange event. If you do not want something to happen in the itemclick event, just do not define it (remove the listener).

Answer 4

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