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

Question

I'm trying to retrieve the selected node, if any, of a TreePanel when the user clicks a button. How do you retrieve the select node in a TreePanel? Thanks.

Solution 1

What you would do is create an event handler. Each ExtJs object has a number of events that are automatically associated with them. You would write an event handler (a function) that you could then assign to an event listener. So, in this case, you would probably want to assign an event handler to the 'click' event of your TreePanel component.

var tbPan = new Ext.tree.TreePanel({
    itemId:'navTree',
    autoScroll: true,
    root: new Ext.tree.TreeNode({
        id: 'root',
        text: 'My Tree Root',
        rootVisible: true
    }),
    listeners: {
        click: {
            fn:clickListener
        }
    }
});

clickListener = function (node,event){
    // The node argument represents the node that
    // was clicked on within your TreePanel
};

But, what happens if you want to know a node that is already selected? At that point you'll need to access the TreePanel's Selection Model. You mentioned a button action. Let's say you wanted to apply a function to that button's click handler to get the selected node:

var btn = new Ext.Button({
    text: 'Get Value',
    handler: function (thisBtn,event){
        var node = Ext.fly('navTree').getSelectionModel().getSelectedNode();
    }
});

You used the flyweight element to get a quick reference to the TreePanel itself, then used that TreePanel's internal method for getting the it's Selection Model. After that you used that Selection Model's (in this case the DefaultSelectionModel) internal method to get the Selected Node.

You will find a wealth of information within the Ext JS Documentation. The online (and offline AIR app) API is quite extensive. The Ext Core manual can also give you a great deal of insight into ExtJS development, even if you aren't using the Core directly.

Solution 2

var tree = Ext.create('Ext.tree.Panel', {
    store: store,
    renderTo: 'tree_el',
    height: 300,
    width: 250,
    title: 'ExtJS Tree PHP MySQL',
    tbar : [{
        text: 'get selected node',
        handler: function() {
            if (tree.getSelectionModel().hasSelection()) {
                var selectedNode = tree.getSelectionModel().getSelection();

                alert(selectedNode[0].data.text + ' was selected');
            } else {
                Ext.MessageBox.alert('No node selected!');
            }

        }

    }]

});

Solution 3

In Ext JS 4 you can put a listener on the tree panel like this:

listeners: {

    itemclick: {
        fn: function(view, record, item, index, event) {
            //the record is the data node that was clicked
            //the item is the html dom element in the tree that was clicked
            //index is the index of the node relative to its parent
            nodeId = record.data.id;
            htmlId = item.id;
        }
    }

}

Solution 4

var nodesSelected = Ext.getCmp('foldersTree').getSelectionModel().selected.items;
if(nodesSelected.length > 0)
{
    var node = nodesSelected[0];
    console.log(node.internalId);
}

This is for ExtJS4 TreePanel

Solution 5

For ExtJS 4...

I have added the following listener in my tree panel:

listeners: 
{
  itemclick: function(view, record, item, index, e)
  {
    selected_node = record;
  }
}

where selected_node is a global variable. Functions like append and remove can be used with this record variable e.g.:

selected_node.appendChild({text: 'New Node', leaf: true});
selected_node.remove();

I have created buttons for Add Node and Delete Node which use the above to append and remove nodes to the selected node. remove() will remove the selected node as well as all child nodes!

You may also get the selected node any time using (the selection occurs with left as well as right mouse click): var selected_node = Ext.getCmp('tree_id').getSelectionModel().getSelection()[0];

View more solutions

Comments

[Yasir]

This was good, as the example I found did not respond to click and needed itemclick. I guess the event times got updated.

[Miljen Mikic]

In ExtJS 4+ there is no method getSelectedNode() in Ext.selection.Model, but there is getSelection().