CODEWITHSUNDEEP
extjstreepanel
JD.
JD.

Reputation: 191

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

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.

Upvotes: 16

Views: 69152

Answers (10)

vino20
vino20

Reputation: 429

Simple ....

itemclick: function(view, record, item, index, e)
{
   alert(record.data.text);
}

Upvotes: 0

Sun
Sun

Reputation: 109

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

        }

    }]

});

Upvotes: 11

Farish
Farish

Reputation: 618

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];

Upvotes: 2

AlexDi
AlexDi

Reputation: 31

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

Upvotes: 3

Chris
Chris

Reputation: 2374

In ExtJS4 you can use the getLastSelected() method which returns the last selected item in a tree.

See ExtJS: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getLastSelected

An example might look like this:

var tree = this.up("window").down("supportedcontrolcircuitmodelselector");
var selectedCircuit = tree.getSelectionModel().getLastSelected()

Upvotes: 1

Vikas
Vikas

Reputation: 24332

var myTree = Ext.getCmp('tree-panel');
var selectednode = myTree.selModel.selNode

Upvotes: 1

chris
chris

Reputation: 6843

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

}

Upvotes: 5

Johannes
Johannes

Reputation: 11

@Steve

Ext.fly('navTree').getSelectionModel().getSelectedNode();

is not going to work, use

Ext.getCmp('navTree').getSelectionModel().getSelectedNode();

instead.

Upvotes: 1

Mrutyunjaya
Mrutyunjaya

Reputation: 

var selectednode = tree.getSelectionModel().getSelectedNode();

                //alert(selectednode);
                if(selectednode!=tree.getRootNode())
                selectednode.remove();

Upvotes: 3

Steve -Cutter- Blades
Steve -Cutter- Blades

Reputation: 5442

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.

Upvotes: 17

Related Questions