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.

Solution

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

Comments

[Shashwat]

it worked! is it there any difference between tree.root and tree.getRootNode() ?

[Vahid]

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