How to add a child to a node in a TreePanel?

Question

In a tree structure like this

var rootNode = { 
              id: 'root',
              text : 'Root Node',
    expanded : true,
    children : [
    {
        id :  'c1',
        text : 'Child 1',
        leaf : true
    },
    {
        id :  'c2',
        text : 'Child 2',
        leaf : true
    },
    {
        id :  'c3',
        text : 'Child 3',
        children : [
        {
            id :  'gc1',
            text : 'Grand Child',
            children : [
            {
                id :  'gc11',
                text : 'Grand Child 1',
                leaf : true
            },
            {
                id :  'gc12',
                text : 'Grand Child 2',
                leaf : true
            }
            ]
        }
        ]
    }
    ]
};

var tree = new Ext.tree.TreePanel({
    id: 'treePanel',
    autoscroll: true,
    root: rootNode
});

How do I add a child node of any node (say 'grandchild')?

I can access the child by traversing the root of the treepanel, but I console.logged it in Firebug, it does not have any functions. Sorry for the unformatted code, I was not able to format it.

Tree Panel

To actually see available function in Firebug install Illuminations for Developers - a Firebug plugin. Extremely helpful for ExtJS development. — dbrin, Apr 24 '12 at 02:17

score 13 · Accepted Answer · answered Apr 23 '12 at 08:30

13

Do something like this:

var treeNode = tree.getRootNode();
treeNode.expandChildren(true); // Optional: To see what happens
treeNode.appendChild({
        id: 'c4',
        text: 'Child 4',
        leaf: true
});
treeNode.getChildAt(2).getChildAt(0).appendChild({
        id: 'gc13',
        text: 'Grand Child 3',
        leaf: true
});

If this is what you need, check out NodeInterface Class. It has many useful methods: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.NodeInterface

answered Apr 23 '12 at 08:30

Vahid

3,384
2
35
69

it worked! is it there any difference between tree.root and tree.getRootNode() ? – Shashwat Apr 24 '12 at 08:08
'root' config is for when you don't want store and hardcode your root data into that config (like your code above). After that you can return your root data with getRootNode() method at runtime. Read root 'config' and getRootNode() 'method' carefully at link above. – Vahid Apr 24 '12 at 13:21

score 0 · Answer 2 · answered Sep 10 '15 at 11:36

It may be an older thread, but, I had an issue where I added a child to the selected node. I wanted to show the new child by expanding the selected node and such failed.

The reason: the selected node to which I appended a child had its property 'leaf' set to true. That was correct. But due to the append, this was no longer true. And because of it, apparently, Ext refuses to expand the node...

So beware: when you add a node to another node, make sure you set the 'leaf' property of the parentNode to 'false':

var newNode = Ext.create('some.model.TreeModel', savedNode);
newNode.set('parentId', record.parentLocationId);
selectedNode.set('leaf', false);
selectedNode.appendChild(newNode);
selectedNode.expand();
treeView.getSelectionModel().select(newNode);

How to add a child to a node in a TreePanel?

2 Answers2