How to add new childs dynamically from json to treenode in extjs4 - extjs4

Question

i am working in extjs4. I have created treepanel view as-
Now on clicking on node surrounding,i am retrieving its id,sending it to server side and retriving its corresponding childs. I am getting this serverside output in json format as-
{"children":[{"text":"Subgeo1","leaf":true,"expanded":false,"checked":false},{"text":"Subgeo2","leaf":true,"expanded":false,"checked":false}]}
So now i want to insert this above json elements as childs of node "surrounding". So how to update tree store with this new childs? Or how can i add childs dynamically? please help me

Answer 1

Here's my example how I add elements on my tree:
on_AddTreeNodes: function (win) {
var _this = this;
//your tree
var tree = win.down('treepanel[name=main_tree]');
//get tree root
var root = tree.getRootNode();
var first = root.firstChild;
var _index = first.childNodes.length - 1;
//adding folder
first.insertChild(_index, { text: 'New folder name', leaf: false });
var data = first.getChildAt(_index);
Ext.Ajax.request({
url: 'your url',
method: 'GET',
params: {
//some params
},
success: function (objServerResponse) {
//if success, you add your data from server into your tree
data.insertChild(data.firstChild, {
text: 'your leaf name',
leaf: true,
//your other params
});
});
//sync your tree store
tree.getStore().sync();
}
In my example I use insertChild - this method adding childs in my tree.
Here's some information that should help you : work with tree in ExtJs
In my view I have
Ext.applyIf(me, {
items: [
{
xtype: 'treepanel',
name: 'main_tree',
title: 'Menu',
region: 'west',
collapsible: true,
rootVisible: false,
viewConfig: {
width: 230
},
store: Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{
text: '',
expanded: true,
children: [
{ text: 'Menu item', leaf: true, param1: 'somedata', param2: 'somedata', param3: 'somedata' },...
and when I use:
data.insertChild(data.firstChild, {
text: 'your leaf name',
leaf: true,
//your other params
});
instead '//your other params' you get params from your JSON and write like this:
data.insertChild(data.firstChild, {
text: 'your leaf name',
leaf: true,
param1: 'jsondata',
param2: 'jsondata',
param3: 'jsondata'
});