PDA

View Full Version : [OPEN] Dynamic TreeStore Data



Txoov
29 Apr 2014, 3:31 PM
Hi, I am trying to create a tree dynamically. Initially the TreeStore data is empty. I want to load the data when a button is clicked. Below is how the tree is defined.

Ext.define('sD.view.design.Treepanel', {
extend: 'Ext.tree.Panel',
title: 'Fields',
store: Ext.data.TreeStore({
storeId: 'treeStore',
fields: [
{name: 'text', type: 'string', convert: function (v, rec) {
return rec.data.title || rec.data.fieldLabel || rec.data.text;
}},
{name: 'leaf', type: 'boolean', convert: function (v, rec) {
return (rec.data.id === 'root' || rec.data.items) ? false : true;
}},
{name: 'expanded', type: 'boolean', defaultValue: true}
],
data: [],
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}),
rootVisible: false
});

I tried to set the data and load the tree when the button is clicked using an ajax call. This doesn't seem to work. How do I load the tree with new data? Note that I need the json to be converted using the fields convert function. Thanks...

var json = Ext.decode(res.responseText);
Ext.getStore('treeStore').setData(json);
Ext.getStore('treeStore').load();

Txoov
29 Apr 2014, 5:07 PM
I forgot to mention that below is what worked for me in ExtJS 4.2. I'm trying to get the same to work in ExtJS 5.0.

this.getTreeStore().proxy.data = Ext.decode(json[0][0]);
this.getTreeStore().load();

Txoov
30 Apr 2014, 1:11 PM
Doing this works in ExtJS 5.0. Not sure if it's the best way though.

Ext.getStore('treeStore').proxy._data = Ext.decode(json[0][0]);
Ext.getStore('treeStore').load();

mitchellsimoens
1 May 2014, 4:33 AM
That's not the best way, you can use the root config within the tree store: https://fiddle.sencha.com/#fiddle/5h0

In your Ext.define, you should never sent an instance to a property like you are, you should use config objects or strings (for storeId). In my example, I use a config object to create the tree store.

Txoov
1 May 2014, 9:05 AM
Thanks for the response, mitchell. In your example, how would you change the root config to something else? Can you provide a button when clicked loads a different tree? That was my issue. I could not change the tree dynamically.

Here's how I have the treepanel store defined now. Thanks...

title: 'Fields',
store: {
storeId: 'treeStore',
fields: [
{name: 'text', type: 'string', convert: function (v, rec) {
return rec.data.title || rec.data.fieldLabel || rec.data.text;
}},
{name: 'leaf', type: 'boolean', convert: function (v, rec) {
return (rec.data.id === 'root' || rec.data.items) ? false : true;
}},
{name: 'expanded', type: 'boolean', defaultValue: true}
],
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
},
rootVisible: false,

mitchellsimoens
1 May 2014, 9:41 AM
Updated my fiddle: https://fiddle.sencha.com/#fiddle/5h0

There are two different ways setRootNode being the preferred but wanted to show another possibility as the 2nd (remvoeAll/appendChild) will work for child nodes to update it's children not just the root node.

Txoov
1 May 2014, 11:05 AM
Thanks, mitchell. I'm getting close. If I change your setRootNode code to below the tree loads but the 'One' folder doesn't expand after I collapse it. Do I need to set a config property as well to allow the folder to expand?

store.setRootNode({
expanded: true,
children: [{
text: 'One',
expanded: true,
children: [{
text: 'Foo',
leaf: true
}]
}, {
text: 'Two',
children: []
}]
});

mitchellsimoens
1 May 2014, 11:07 AM
No, it should be expandable. I'm going to open that as a bug.

Txoov
1 May 2014, 11:20 AM
Thanks, mitchell. I'll use my work around for now until the bug is fixed.

spatel.engg
13 May 2014, 10:00 PM
Hello,
I am having similar problem when i refresh treepanel with setRootNode my rootNode disappears and also node expand and collapse is not working properly like animation is not working and once you expand node then it can't be collapsed and visa verse.

Please check : https://fiddle.sencha.com/fiddle/5po/preview

Thanks & Regards,
Sunil