Question

I’m trying to change this ext js treegrid sample:
http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/treegrid.html

All I want is to add a node at a specific location.

I tried this:

 var treePanel = Ext.getCmp('treePanel');
 var selNode = treePanel.getSelectionModel().getSelection()[0];
 var appendedChild = selNode.appendChild({
                       task: 'Task1',
                       user: 'Name',
                       duration: '10',
                       leaf: true
                     });

It gives no errors, but the UI doesn’t update. Same thing with selNode.insertChild(0, .. It runs with no errors, but the UI doesn’t update.

Somehow this works:

var node = treePanel.store.getRootNode();
node.appendChild({
                    task: 'Task3',
                    user: 'Name',
                    duration: '10',
                    leaf: true
                });

So how do I append/insert at a specific location based on user selection.

Here is what my full code looks like: http://jsfiddle.net/4T68s/
I changed the store to static data because a crossdomain request to get the json data wouldn’t work.

Answer 1

You should change leaf property to false on node before you add child to it:

selNode.set('leaf', false);

Working sample: http://jsfiddle.net/lolo/4T68s/6/