Extjs - How to insert/update/delete - child nodes - dynamically

My question is similar to http://www.sencha.com/forum/showthread.php?2916-insert-update-delete-child-nodes-dynamically

only difference being that I am using Ext.Tree. I split main page into two portions. I kept left portion for di开发者_如何学编程splaying data in tree structure and right portion for some displaying some details in the screen.

Currently there are some child nodes are under root node (Source). When one of child clicked, I populate some data in the right portion of screen.

Can anyone explain me to how update (insert/update/delete) child nodes dynamically when i add or delete data on right part of screen which is a grid.

   Ext.onReady(function() {

    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
        useArrows: true,
        autoScroll: true,
        animate: true,
        enableDD: true,
        containerScroll: true,
        border: false,
        // auto create TreeLoader
        dataUrl:'[JS Array]',
        root: {
            nodeType: 'async',
            text: 'ALL',
            draggable: false,
            id: ''
        }
    });

    // render the tree
    tree.render('tree-div');
    tree.getRootNode().expand();
}); 

You should look at the TreeNode class. It has methods addChild() and getPath() and removeChild that can be used to remove nodes and leaves from your treee.

EDIT: The original answer is for a deprecated version

Current Documentation Link: http://docs.sencha.com/extjs/6.2.1/classic/Ext.data.TreeStore.html#methods

Current "classic" ext appears to have unified the datasources to use something closer to a traditional data store called a TreeStore which should allow you to manipulate the tree's leaves and branches.