Single click to open tree node

[stevanicus]

Hi,

I'm trying to configure my tree panel to open collapsed nodes per single click... I have tried implementing my own method on the "itemclick" event... but this seem to open up other problems when animations are not completed in time.... i.e. its "children" are not hidden and left visible, doubling with the next node expand() - this happens if you try to expand and collapse a node in quick succession.

I also tried passing singleClickExpand: true attribute in json passed from the server... but no luck.

Is there anything preset by Extjs for this feature? I can't seem to find anything in the documentation.

Thanks in advance

[Zdeno]

I think you need override your tree or add plugin because click function expand the node only when you click on expander selector:

onItemClick: function(record, item, index, e) {
	if (e.getTarget(this.expanderSelector, item) && record.isExpandable()) {
	    this.toggle(record, e.ctrlKey);
	    return false;
	}
	return this.callParent(arguments);
}

Check dblclick function below:

onItemDblClick: function(record, item, index) {
	var me = this,
	editingPlugin = me.editingPlugin;


	me.callParent(arguments);
	if (me.toggleOnDblClick && record.isExpandable() && !(editingPlugin && editingPlugin.clicksToEdit === 2)) {
		me.toggle(record);
	}
}

I think its pretty simple to make node expandable by single click.

[suzuki1100nz]

Try this.
Define an extension to Ext.tree.Panel

Add the following constructor and method

constructor: function() {
  var me = this;
  me.callParent(arguments);
  
  //Arm an item click listener so we can force and expand or collapse
  me.on('itemclick', me.itemClicked, me, {});
},

 itemClicked : function(obj, record, item, index, e, eopts) {
    var me = this,
    isExpanded = record.isExpanded();
    //If the node is expandable and it is currently expanded the collapse otherwise expand
    (record.isExpandable() && isExpanded) ? me.collapseNode(record) : me.expandNode(record);
  }