PDA

View Full Version : How to reload a tree grid with tree store with new data



pk.hafeez
6 Feb 2012, 5:34 AM
Hi,

I have a tree grid with tree store. For the Tree Store im passing data using data attribute. The tree grid is in a tree panel. I want to reload the tree grid every time i change the tree store.

Im passing data to store using data: "text":".","children":staticjsonobject

I want to reload the tree store every now n then with modified static json object. Basically tree grid associated with this store should also be reloaded.

Also when im reloading a store, with modified json object. im trying to add or remove columns of a grid.

All is well, but nothing is coming out finally.

1.Tree store reload
2.Change dynamic columns
3.Reload tree grid

Find the attached code

ssawchenko
6 Mar 2012, 5:12 PM
Did you find a solution for this? I am having the same issue.

incutonez
6 Mar 2012, 6:10 PM
I'm a little confused... are you looking to replace the store entirely? If so, you can do something like



var secondStore = Ext.create('Ext.data.TreeStore', {
storeId: 'treestore',
root: {
text: 'root',
visible: true,
children: [{
text: 'blah blah blah',
id: 'leaf10',
visible: true,
children: [{
text: 'ejlaisdisdiids',
id: 'child10',
visible: true,
leaf: true
},{
text: 'easdlfkjsldjf',
id: 'child20',
leaf: true,
visible: false
}]
},{
text: 'bleh bleh bleh',
id: 'leaf20',
leaf: true,
visible: false
},{
text: 'asdlfjejasd',
id: 'leaf30',
visible: true,
leaf: true
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});

Ext.getCmp('yourTreePanel').store.setRootNode(secondStore.getRootNode().copy(null, true));


Is that what you were looking for?

ssawchenko
7 Mar 2012, 10:50 AM
Yes, that is exactly what I'm looking to do (replace the entire store with a new one), however, the code you suggested did not appear to work for me. The root is changing, but it appears to not show the entire new root (screen shots to follow).This is what I'm doing:



function reloadDasboards(newChildren)
{
// Create new store
var newStore = Ext.create("Ext.data.TreeStore",
{
root:
{
id: "hometree_root",
expanded: true,
leaf:false,
text: "Home",
children: newChildren
}
});


// Use root of new store
Ext.getCmp('homeTree').store.setRootNode(newStore.getRootNode().copy(null, true));
}


'newChildren' is generated in PHP from our DB and is parsed into the following JSON:
[{"id":"Personal","text":"Personal","qtip":"Personal","children":[{"id":"37e999d8-2747-11e1-a6e4-9618b133e9f6","text":"Weather","qtip":"Weather","href":"\/enteliweb\/dashboard\/display\/dashboard\/37e999d8-2747-11e1-a6e4-9618b133e9f6","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"51d05bf1-25df-11e1-a6e4-9618b133e9f6","text":"Admin's Dashboard","qtip":"Admin's Dashboard","href":"\/enteliweb\/dashboard\/display\/dashboard\/51d05bf1-25df-11e1-a6e4-9618b133e9f6","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"60808212-67dd-11e1-b686-0026b978baa8","text":"test","qtip":"test","href":"\/enteliweb\/dashboard\/display\/dashboard\/60808212-67dd-11e1-b686-0026b978baa8","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"61ec631e-2b35-11e1-a6e4-9618b133e9f6","text":"Alarms","qtip":"Alarms","href":"\/enteliweb\/dashboard\/display\/dashboard\/61ec631e-2b35-11e1-a6e4-9618b133e9f6","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"624c6a09-3c96-11e1-a553-254d147d379d","text":"Log","qtip":"Log","href":"\/enteliweb\/dashboard\/display\/dashboard\/624c6a09-3c96-11e1-a553-254d147d379d","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"66112454-42be-11e1-a50a-1f75ec438bec","text":"Crash","qtip":"Crash","href":"\/enteliweb\/dashboard\/display\/dashboard\/66112454-42be-11e1-a50a-1f75ec438bec","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"72946ae0-2686-11e1-a6e4-9618b133e9f6","text":"3rd party","qtip":"3rd party","href":"\/enteliweb\/dashboard\/display\/dashboard\/72946ae0-2686-11e1-a6e4-9618b133e9f6","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"7bb5cf74-5cef-11e1-afb1-4befcf3fcc42","text":"FUSION","qtip":"FUSION","href":"\/enteliweb\/dashboard\/display\/dashboard\/7bb5cf74-5cef-11e1-afb1-4befcf3fcc42","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"9cf7cc0a-3b09-11e1-a553-254d147d379d","text":"Example","qtip":"Example","href":"\/enteliweb\/dashboard\/display\/dashboard\/9cf7cc0a-3b09-11e1-a553-254d147d379d","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"d35df828-566b-11e1-afb1-4befcf3fcc42","text":"siteinfo","qtip":"siteinfo","href":"\/enteliweb\/dashboard\/display\/dashboard\/d35df828-566b-11e1-afb1-4befcf3fcc42","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"f43bd8fe-46de-11e1-b0bb-510b422d1bfd","text":"DailyAverage","qtip":"DailyAverage","href":"\/enteliweb\/dashboard\/display\/dashboard\/f43bd8fe-46de-11e1-b0bb-510b422d1bfd","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"}]},{"id":"Enterprise","text":"Enterprise","qtip":"Enterprise","children":[{"id":"1217c4d7-687e-11e1-b686-0026b978baa8","text":"222222","qtip":"222222","href":"\/enteliweb\/dashboard\/display\/dashboard\/1217c4d7-687e-11e1-b686-0026b978baa8","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"2f8f82ea-687e-11e1-b686-0026b978baa8","text":"333333","qtip":"333333","href":"\/enteliweb\/dashboard\/display\/dashboard\/2f8f82ea-687e-11e1-b686-0026b978baa8","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"3e619eba-687e-11e1-b686-0026b978baa8","text":"44444","qtip":"44444","href":"\/enteliweb\/dashboard\/display\/dashboard\/3e619eba-687e-11e1-b686-0026b978baa8","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"470692d2-687d-11e1-b686-0026b978baa8","text":"00000000","qtip":"00000000","href":"\/enteliweb\/dashboard\/display\/dashboard\/470692d2-687d-11e1-b686-0026b978baa8","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"780b7044-687d-11e1-b686-0026b978baa8","text":"1111111","qtip":"1111111","href":"\/enteliweb\/dashboard\/display\/dashboard\/780b7044-687d-11e1-b686-0026b978baa8","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"},{"id":"9041770f-6884-11e1-b686-0026b978baa8","text":"5555555","qtip":"5555555","href":"\/enteliweb\/dashboard\/display\/dashboard\/9041770f-6884-11e1-b686-0026b978baa8","hrefTarget":"mainFrame","leaf":true,"iconCls":"dashboard_icon"}]}]The code that generates the JSON is essentially the same for both (1) when the tree is initially loaded, and (2) when I manually request the new data store, so I am thinking that there is something going wrong with my execution of things.

Here are some screen shots which will help show what is happening:

This is the state of my tree view BEFORE attempting to reload the new store (which will contain Enterprise -> 5555555)
.32474

Here is what it looks like after running the above code (switching root nodes):32473

This is what should be expected (and can be seen if the entire frame is reloaded)32475

Thank you for your help!

ssawchenko
7 Mar 2012, 10:51 AM
ps. Blech... I'm not sure what the editor did to my formatting... but it's all bunked up! Trying to fix it was futile, so hopefully you can read that!

incutonez
7 Mar 2012, 12:05 PM
Odd. Do you get any errors from firebug when you run that code? I'm able to run it and get both of your parent nodes (Personal and Enterprise) with all of their child nodes. I would think your problem would have to do with your newChildren object.

ssawchenko
8 Mar 2012, 9:14 AM
!Contains Solution Below!

No errors, but I'm thinking it may be a bug in the deep copy (where the children aren't being copied).
I tried breaking it down into a simpler issue used a hard coded array of nodes like this:



function reloadDasboards(newChildren) {
// Create new store
var newStore = Ext.create("Ext.data.TreeStore",
{
root:
{
id: "hometree_root",
expanded: true,
leaf: false,
text: "Home",
children: [
{
text: 'Folder 1',
id: 'leaf10',
children: [{
text: 'Item 1.1',
id: 'child10',
leaf: true
},{
text: 'Item 1.2',
id: 'child20',
leaf: true
}]
},{
text: 'Item 1',
id: 'leaf20',
leaf: true
},{
text: 'Item 2',
id: 'leaf30',
leaf: true
}]
}
});


// Use root of new store
Ext.getCmp('homeTree').store.setRootNode(newStore.getRootNode().copy(null, true));
}

Inspecting "newStore.getRootNode().copy(null, true)" showed that "Folder 1" contained no children, so it seems like the deep copy wasn't working as expected. I am using 4.1.0 beta3, so I'm not sure if this is a known issue or not. Should I try to report this?

!My Solution!
BUT! The good news is that a co-worker steered me in the right direction. Instead of creating an entirely new TreeStore, I can simply pass in the NodeInterface JSON to setRootNode:


function reloadDasboards(newChildren) {
// Create new store
var newRootNode =
{
id: "hometree_root",
expanded: true,
leaf:false,
text: "Home",
children: newChildren
};


// Use root of new store
Ext.getCmp('homeTree').store.setRootNode(newRootNode);
}


This appears to replace the TreeStore completely with the new root node. Only thing left to solve is how to update the state of the tree to reflect nodes being open and closed prior. But that is a different task entirely.

Thank you for all your help!

incutonez
8 Mar 2012, 9:46 AM
There is a known problem with the deep copy function, and I forgot about that because I had already fixed mine. Just curious... does this thread solve the problem? http://www.sencha.com/forum/showthread.php?134844-tree-node-copy%28deep%29-not-working-%284.0.1
(http://www.sencha.com/forum/showthread.php?134844-tree-node-copy%28deep%29-not-working-%284.0.1)

ssawchenko
14 Mar 2012, 10:11 AM
I solved this by setting the rootnode to a node interface JSON object, instead of trying to create a new store and THEN copy it to the rootnode.

This worked for me.


function reloadDasboards(newChildren) {
// Create new store
var newRootNode =
{
id: "hometree_root",
expanded: true,
leaf:false,
text: "Home",
children: newChildren
};


// Use root of new store
Ext.getCmp('homeTree').store.setRootNode(newRootNode);
}

incutonez
14 Mar 2012, 11:50 AM
Yeah, that works too, but I guess I figured you were going to do AJAX calls or something. Either way, glad you got it working!

incutonez
19 Mar 2012, 3:19 PM
So I came across an interesting issue... your method works with creating a spare variable, but what about copying the root node, so you can use it later? Well, not so much. Here's the code.

Creating a blank node to use later on

var node = {
id: 'root',
text: 'root',
expanded: true,
children: [{
id: 'child1',
text: 'child1',
leaf: true
},{
id: 'child2',
text: 'child2',
leaf: true
}]
};


The store

var store = Ext.create('Ext.data.TreeStore', {
storeId: 'treestore',
proxy: {
type: 'memory',
reader: {
type: 'json'
}
},
snapshot: node,
root: {
id: 'root',
text: 'root',
expanded: true,
children: [{
id: 'dummy1',
text: 'dummy1',
leaf: true
},{
id: 'dummy2',
text: 'dummy2',
leaf: true
}]
}
});

Tree Panel

Ext.create('Ext.tree.Panel', {
store: store,
renderTo: Ext.getBody(),
height: 600,
width: 600,
id: 'mytree',
tbar: [{
xtype: 'button',
text: 'set child1 as root',
handler: function() {
var store = Ext.getCmp('mytree').store;
store.setRootNode(store.snapshot);
alert(store.getNodeById('child1').data.id); // alerts child1
}
},{
xtype: 'button',
text: 'set dummy1 as root',
handler: function() {
var store = Ext.getCmp('mytree').store;
store.setRootNode(store.snapshot2.copy(null, true));
alert(store.getNodeById('dummy1')); // alerts undefined
}
},{
xtype: 'button',
text: 'set dummy1 with diff copy',
handler: function() {
var store = Ext.getCmp('mytree').store;
store.getRootNode().removeAll();
store.snapshot2.eachChild(function(rec) {
store.getRootNode().appendChild(rec.copy(null, true));
});
alert(store.getNodeById('dummy1').data.id); // alerts dummy1
}
}]
});

Setting snapshot2 to the store's current root node

Ext.getCmp('mytree').store.snapshot2 = Ext.getCmp('mytree').store.getRootNode().copy(null, true);

So when you click the first button, you get the proper value ('child1') in the alert. However, when you click the second button ('set dummy1 as root'), you get undefined in the alert. The third button gives you the proper output ('dummy1'), and manually deep copies each child to the root.

To me, it seems like the copy function or the setRootNode function isn't doing something properly (leaning more toward the former). If I'm specifying a deep copy with `copy(null, true)`, then the deep copy should be taking place, and everything should be fine... but I realize there's a problem with the copy function from the get go (see this thread (http://www.sencha.com/forum/showthread.php?134844-tree-node-copy(deep)-not-working-(4.0.1)). That's why I'm thinking it could be with the setRootNode, but that wouldn't make sense if setRootNode works for my created node but not for the deep copied original root node.

I'm not really sure what's going on, so if anyone has any insight, I'd be interested in hearing it.