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

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:

http://stackoverflow.com/questions/822319/how-do-i-find-the-selected-node-in-an-extjs-treepanel

Answer 3

Hi, i'm so newbye about extjs, i'm trying to add an action to a node in a TreePanel, i tried the solution proposed by gerry but it doesn't work this is my code

    var Tree = Ext.tree;
    var root = new Tree.AsyncTreeNode({
     text: 'Vigneti',
     draggable:true, // disable root node dragging
     id:'source'
    });

    var tree = new Tree.TreePanel({
     renderTo : 'vigne',
     animate:true, 
     loader: new Tree.TreeLoader({dataUrl:'user.php'}),
     containerScroll: true,
     root: root
    });
    Ext.get('tree').on('click',function(node,event){
     if(node.isLeaf()){
      ZoomCantine(node.getAttributes('geo'))
     }
    });

and this is the function ZoomCantine

function ZoomCantine(bound)
{
    var estensione = new OpenLayers.Bounds(bound[0],bound[1],bound[2],bound[3]);
    return map.zoomToExtent(estensione);
}

can someone help me? thanks Luca

Answer 4

Add a listener to the TreePanel:

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

and use the data in the node.