I want my treepanel to do something when double clicked.

But when I double click a treenode, the node always expends or collapses.

How can I disable this expanding or collapsing from happening when I double click.

my english isn't very good sorry!

I want my treepanel to do something when double clicked.

But when I double click a treenode, the node always expends or collapses.

How can I disable this expanding or collapsing from happening when I double click.

my english isn't very good sorry!

• javascript
• extjs
• tree

3 Answers 3

You can add toggleOnDblClick: false in the viewConfig when declaring the treepanel, just add viewConfig as any other propriety:

{
    xtype: 'treepanel',   
    id: 'tree_id',
    name: 'tree_name',
    viewConfig: {
         toggleOnDblClick: false
    },
    width:....
}

yourTree.on('beforeitemdblclick', function() { return false; });

Actually, overriding (Ext.tree.TreeNodeUI.override) is not a good practice (because it changes behavior for all TreeNodeUI's of application), so I propose to override createNode method in TreeLoader of the current tree:

new Ext.tree.TreePanel({
...
loader:new Ext.tree.TreeLoader({
            ...
            // override the CreateNode function
            createNode:function (attr) {
                attr.uiProvider = Ext.extend(Ext.tree.TreeNodeUI, {
                    // private
                    onDblClick:function (e) {
                        e.preventDefault();
                        if (this.disabled) {
                            return;
                        }
                        if (this.fireEvent("beforedblclick", this.node, e) !== false) {
                            // if (this.checkbox) {
                            //     this.toggleCheck();
                            // }
                            // if (!this.animating && this.node.isExpandable()) {
                            //     this.node.toggle();
                            // }

                            // DO YOUR STAFF HERE

                            this.fireEvent("dblclick", this.node, e);
                        }
                    }
                });

                return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
            }});