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.

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.

• javascript
• extjs
• extjs4
• treepanel

• To actually see available function in Firebug install Illuminations for Developers - a Firebug plugin. Extremely helpful for ExtJS development. – dbrin Commented Apr 24, 2012 at 2:17

2 Answers 2

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

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