Prevent ExtJS treenodes from collapsing

Question

I'm dynamically adding nodes to an ExtJS TreePanel. I have a dblclick listener for nodes for opening a new panel. When i double click the node, the node automatically collapses.

I don't want the node to collapse when I double click on it. Is there a way to stop that happening?

Answer 1

Implement beforedblclick event for the Node; then, whenever the event is triggered, see if the node is expanded, and if yes, return false.

From ExtJS API documentation:

beforedblclick : ( Node this, Ext.EventObject e )

Fires before double click processing. Return false to cancel the default action.

Answer 2

I think the default TreePanel has a default listener for 'onclick' which responds alike:

if(node == 'open') {
    closeNode();
} 
else {
    openNode();
}

so double clicking would first open it on the first click and then closing it on the second.

You should add a listeners to the treepanel's like so:

new Ext.tree.AsyncTreeNode({
                expanded: true,
                children: [{
                    text: 'Menu Option 1',
                    leaf: true
                }, {
                    text: 'Menu Option 2',
                    leaf: true
                }, {
                    text: 'Menu Option 3',
                    leaf: true
                }]
            }),
            rootVisible: false,
            listeners: {
                click: function(n) {
                    return false;
                },
                dblclick: function(n) {
                    Ext.Msg.alert('Navigation Tree Click', 
                        'You clicked: "' + n.attributes.text + '"');
                }
            }

Answer 3

In the case of a tree grid (tree panel with multiple columns) this did it for me (ExtJS6):

listeners: {
    beforecelldblclick: function(){
        return false;
    }
}