How To Set singleClickExpand on Tree Node in ExtJS 4

Question

The default action to expand a node on ExtJS tree is double-click.

Before version 4, there is singleClickExpand property in TreeNode configuration.

How to apply singleClickExpand behavior on ExtJS version 4 tree ??

Is there a configuration property for this behavior without setting event listener??

Thank you.

Answer 1

I've spent some time looking for the same thing. I feel I can definitively answer your question with... No there isn't a config option for it. I had to set a click handler. I needed one anyway though to implement functionality for leaf clicks:

var tree = Ext.create('Ext.tree.Panel', {
    store: store,
    rootVisible: false,
    lines: false,
    useArrows: true,
    listeners: {
        itemclick: function(view, node) {
            if(node.isLeaf()) {
                // some functionality to open the leaf(document) in a tabpanel
            } else if(node.isExpanded()) {
                node.collapse();
            } else {
                node.expand();
            }
        }
    }
});

Answer 2

In fact you use the expand function of the treeview.

Just implement the itemclick function on you treepanel:

listeners: {
    itemclick: function (treeview, record, item, index, e, eOpts) {
        treeview.expand(record);
    }
}

Answer 3

If you're using keyboard navigation, you probably need to use the selectionChange event so that you cover all the scenarios, but anyway, here's an approach i'm using in my case to achieve the singleClick thingy.

define a new event in the tree, for instance imagine you have defined a class which inherits from the treepanel, then in the "initComponent" you would create the event:

Ext.define('MY.view.CheckList', { extend: 'Ext.tree.Panel', alias: 'widget.checklist',

store: 'CheckPoints',
useArrows: true,

initComponent: function () {

    this.callParent(arguments);     
    this.on("selectionchange", this.onSelectionChange);
    this.addEvents({
        singleClick: true 
    });
},

onSelectionChange: function(model, nodes){

    [....]

    // fire statusUpdated event
    this.fireEvent("singleClick", this, model, nodes);
}

});

then you need to listen to the event you created, for instance:

var mytree = Ext.create("MY.view.CheckList");

mytree.on("singleClick", function( tree, model, nodes){

console.log(">>>>>>>>>>>>>>>>>>>>> EVENT TRIGGERED <<<<<<<<<<<<<<<<<<<<<<<<");
console.log( tree, model, nodes);
var currSelPath = nodes[0].getPath();

//This will expand the node at the path you just clicked
tree.expandPath(currSelPath);

});

2 things:

• You need to tweak it a bit to suit your code scenario
• Ofc you could just listen to the "selectionChange" event directly and do this, but i think from a code reusability standpopint, its cleaner and more obvious, and if you add a bit more logic and checks before you fire the event "singleClick" and imagine if you have more trees that inherit from this base tree, you just need to do it once.

It's not the most perfect solution, i'm sure, but in my case worked fine.

HTH!