Results 1 to 3 of 3

Thread: Single click to open tree node

  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    66
    Answers
    1
    Vote Rating
    1
      0  

    Default Unanswered: Single click to open tree node

    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

  2. #2
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    763
    Answers
    38
    Vote Rating
    74
      0  

    Default

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

    Code:
    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:

    Code:
    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.

  3. #3
    Sencha Premium User suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    714
    Answers
    45
    Vote Rating
    236
      0  

    Default

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

    Add the following constructor and method

    Code:
    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);
      }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •