ExtJS: Add Single Click Action To A Node In A Tree

Question

[revised] I'm creating a TreePanel in ExtJs that is loading its children from a JSON file. I'm having trouble adding a click action to the nodes. I'm not sure whether it's added in the script creating the tree, or if its added as a property in the JSON, and if so, what the syntax would be. Any help would be appreciated! Please provide an example if possible.

Answer 1

This is a very commonly talked about question(events in general), so I would suggest searching the extjs forums and reading what they have in their learning center.

Event listeners can be assigned on creation of the TreePanel or attached to an existing TreePanel.

I have a similar (and common) setup where I have a tree that I use as a navigation menu and each leaf node acts as a link that should be opened in a TabPanel.

To handle the node clicks, you could do something like:

Ext.get('your-tree').on('click', function(node, event){
    if(node.isLeaf()){
        // do what you need to with the node.
    }
});

Jozef Sakalos(aka Saki) has allot of great information on his site extjs.eu. I think you would be most interested in the component communication example.

Answer 2

Gerry is putting you on the right track, and you can never go wrong with Saki's examples. I just answered a very similar question. That answer may give you more information as well:

How do I find the selected node in an ExtJS TreePanel?

Answer 3

Add a listener to the TreePanel:

listeners: {
    click: function(node, event){
        console.log(node);
    }
}

and use the data in the node.