Ext JS 3.4 - Dynamically Add Nodes in TreePanel

Question

I saw a lot of threads talking about adding dynamic nodes to TreePanel using the getNodeById or getRootNode methods and appendChild methods.

For some reason, I'm not able to do it. I don't know if I'am doing something wrong or if this has something to do with Ext JS 3.4.

Can someone tell me if this is right?

{
    xtype: 'treepanel',
    id: 'testTreePanel',
    autoScroll: true,
    width: 250,
    collapsible: true,
    title: 'Navigation',
    containerScroll: true,
    enableDD: true,
    useArrows: true,
    collapsible: true,
    region: 'west',
    root: {
      allowDrag: false,
      allowDrop: false,
      iconCls: 'cover',
      id: 'testRootNode',
      text: 'Root Node'
    },
    loader: {

    }
  }

Here is what I'm doing to add nodes dynamically -

var testNode = new Ext.tree.TreeNode({
     id: 'node_1',
     leaf: true,
     text: 'Test Node Text 1',
     allowDrag: false,
     allowDrop: false
});

Ext.getCmp('testTreePanel').getRootNode().appendChild(testNode);

I see that the nodes have been added under the root, if I do -

Ext.getCmp('testTreePanel').getRootNode().childNodes

but I also notice that the root has allowChildren: false, loaded: false, loading: true and childrenRendered: false

All the threads I've seen say that appendChild should do the trick. I'm not sure if I'm missing something here.

mindparse mindparse · Accepted Answer · 2015-02-18T11:08:09

The following code works for me:

var tree = new Ext.tree.TreePanel({
            id: 'treePanel',
            renderTo: Ext.getBody(),
            autoscroll: true,
            root:   {
                id: 'root',
                text : 'Root Node',
                expanded : true,
                leaf:false,
                children: []
            }
        });

        var treeNode = tree.getRootNode();

        treeNode.appendChild({
                id: 'c1',
                text: 'Child 1',
                leaf: true
        });
        treeNode.appendChild({
                id: 'c2',
                text: 'Child 2',
                leaf: true
        });
        treeNode.expandChildNodes(true);

The only difference with your code is that you are passing an Ext.tree.TreeNode instance to your appendChild method, whereas I am passing in just the object config for a node which is the correct way according to the docs -> http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.tree.TreeNode-method-appendChild

So a subtle difference, but seems to make a lot of difference!?

Ext JS 3.4 - Dynamically Add Nodes in TreePanel

1 Answers