Insert a node at a specific location in Ext.tree.panel

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/

Answer 2

If you want to append nodes, the new parent must not be a leaf. I've update your code to give you an example of how you add the node at the right location and how you change the icon so it doesn't look like the parent folder icon, which is what I assume you're trying to avoid.

http://jsfiddle.net/4T68s/5/

Setup your store like this so that the parent nodes are expanded and loaded.

var store = Ext.create('Ext.data.TreeStore', {
    model: 'Task',
    root: {
        expanded: true,
        children: [
            {
            task: 'Settings',
            leaf: false,
            expanded: true,
            children: [
                {
                task: 'System Settings',
                expanded: true,
                loaded: true,
                icon: 'icon-leaf'},
            {
                task: 'Appearance',
                expanded: true,
                loaded: true,
                }
            ]}
        ]
    }
});

Then insert your a new model like this.

var selNode = treePanel.getSelectionModel().getSelection()[0];
var newTask = Ext.create('Task');
newTask.set({
    task: 'Task1',
    user: 'Name',
    duration: '10',
    expanded: true,
    loaded: true,
    leaf: false,
    icon: 'icon-leaf'
});

selNode.insertChild(0, newTask);

That will create a new parent node which you will then be able to add more tasks to. Use the icon property to set the icon image src or iconCls to do it with CSS. Although there's a bug with the CSS way. It retains the x-tree-icon-parent class for some reason.