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.

Answer 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.

Answer 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!');
            }

        }

    }]

});

Answer 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;
        }
    }

}