PDA

View Full Version : Ext TreePanel: How to add Child Nodes to the expanded node ?



muralic
9 May 2013, 1:51 AM
Hi,
I am trying to create a Tree from Ext.tree.Panel with JSON data.

My JSON
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

I want the first level nodes to be the "firstName: from the above JSON. I am able to achieve this but when any of the node is expanded the same nodes are displayed as children to the expanded node shown below.

- John
---> + John
---> + Anna
---> + Peter
+ Anna
+ Peter

When any of the node is expanded I want to add children from another JSON file. but here the problem is before adding the children to the node i can see the child nodes attached as above.

Is there any way to avoid this behavior ?

Code Snippet

My TreePanel:

Ext.define('MyApp.view.MyTreePanel', {
extend: 'Ext.tree.Panel',
height: 439,
width: 400,
title: 'My Tree Panel',
store: 'MyTreeStore',
displayField: 'firstName',
rootVisible: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
}
});
me.callParent(arguments);
}
});

TreeStore:

Ext.define('MyApp.store.MyTreeStore', {
extend: 'Ext.data.TreeStore',
requires: [
'MyApp.model.MyModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'MyApp.model.MyModel',
storeId: 'MyTreeStore',
proxy: {
type: 'ajax',
url: 'employees.json',
reader: {
type: 'json',
root: 'employees'
}
}
}, cfg)]);
}
});

Model:

Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'firstName'
}
]
});

Thanks in advance....

slemmon
13 May 2013, 7:34 AM
Any chance you can abandon this thread and post your related questions back to your original thread:
http://www.sencha.com/forum/showthread.php?263170

muralic
14 May 2013, 12:40 AM
Thanks Slemmon...
I found the solution for the Thread you are referring to. Now I face the above mentioned problem. So i cannot make this thread abandon.

Does any one have solution for the above problem ? Please share.

Thanks in advance..

muralic
28 May 2013, 2:02 AM
Thanks..
I solved the above problem by overriding the doRequest() method of TreeStore.