How do we get index of select node in a extjs tree?

Question

On my page I have 2 trees. There is form on the page. One tree is shown on the page and another inside the form. I have create trees as below:

var myTree1 = Ext.create('Ext.tree.Panel', {
    store: store,  //where store is hardcoded json tree data
    ....
});

similarly myTree2 is declared with different store. It is shown inside a form. When I select on any node on myTree2 and click on create button then I must be able to add a new leaf node inside myTree1 at the same index.

Help I need are:
1. How to get index of selected node.
2. How to go to the index in myTree1, should be equal to the selected index myTree2.
3. How to add a leaf node at specific index.

Eric Eric · Accepted Answer · 2012-03-08T18:35:30

For reference:
Ext JS 4 TreePanel documentation
Ext JS 4 NodeInterface documentation

The select event provides both the index and the record. If you need general access to it, myTree1.getSelectionModel().getSelection() will return an array of records, which you can then check against the store to get the index.

I'm assuming you want to compare the selected records on both trees. Given the sample in #1, try this:

var tree1rec = myTree1.getSelectionModel().getSelection[0],
    tree2rec = myTree2.getSelectionModel().getSelection[0];
// Perform comparison logic here
// Note that if you're using two different stores, you can't
// just do an equality test. You'll probably have to compare
// individual store values.

Nodes are inserted relative to existing nodes on the tree. So if you have a button click event:

function onButtonClick(button, eOpts) {
    var rec = myTree1.getSelectionModel().getSelection[0];
    if (rec) {
        var childNode = rec.createNode(/* some object here */);
        rec.appendChild(childNode);
    }
}

The details will vary depending on your actual data, but this is the general pattern.

How do we get index of select node in a extjs tree?

1 Answers