PDA

View Full Version : Tree Refresh without display disappearing and reappearing



Reimius
13 Jul 2010, 8:38 AM
Hello everyone,

I'm using a Ext.Tree.TreePanel (More specifically Ext.ux.tree.TreeGrid), and I am using this method to refresh the whole tree:

myTree.getRootNode().reload();

This works fine for refreshing the tree, but the problem that I am having is that the tree will disappear and reappear while refreshing for a couple of seconds. I'd like the visual part of the tree to remain during this whole process, is there a setting for this, or am I going to have to manually track the deltas myself and make changes to the tree nodes through DOM?

Thanks for any help

Reimius
13 Jul 2010, 12:59 PM
No need to worry about this anymore. Took me a while, but I found a solution. I'm not going to take the time to post it unless someone needs it.

briantai
17 Aug 2010, 11:25 AM
would love to hear how. thanks.

Reimius
18 Aug 2010, 1:57 PM
I can get you the solution. Might be a couple of days though, I believe my solution to this was completely custom code, and I will have to dig it out since I've pretty much rewrote the Extjs tree component to handle functional requirements like this one. It's most likely not a simple solution (i.e. a setting change) fyi...

briantai
18 Aug 2010, 1:59 PM
Yea. Would appreciate it! Being able to reload it is great, but then it doesn't maintain the current tree expansion. Frustrating if you're looking at a particular piece of data and it refreshes.

Reimius
18 Aug 2010, 2:09 PM
Oh wow, there are two issues at hand here, and you just so happen to be lucky enough that I have the solution to both...

Problem 1 (From my post here): The tree will visually disappear completely during load time, then reappear after the data has been loaded (seems like a second goes by from my old examples).

You on the other hand want the solution to problem 1 above, and:
Problem 2: The tree does not stay in the same state of expansion when the data is reloaded

And yes, I can provide the solutions to both problems, but I believe there may be two different things you have to do.

Reimius
23 Aug 2010, 5:20 AM
Okay, here is some code that will save the state of the tree when you want to refresh it. Make sure to set clearOnLoad to false in your treeloader. Also, when you return the data from the server you will need to return a column in the result called 'row_id' to uniquely identify each row so that when the new data comes in on a refresh, extjs knows which rows to expand and select. There's only one real drawback and that is that the root node can not be changed for my reloader (I'm using it with the root node hidden, so it doesn't bother me).

In my example, it's refreshing a grid called 'someGrid'


function someGridRefresh()
{
someGridopenNodes = [];
findOpen(someGrid.getRootNode());
var someGridnodes = [];
for(var i = 0; i < someGrid.getRootNode().childNodes.length; i++)
someGridnodes.push(someGrid.getRootNode().childNodes[i]);
var selectedNode = null;
if(someGrid.getSelectionModel().getSelectedNode() != null)
selectedNode = someGrid.getSelectionModel().getSelectedNode().attributes.row_id;
someGrid.getLoader().load(someGrid.getRootNode(), function()
{
for(var i = 0; i < someGridnodes.length; i++)
{
someGrid.getRootNode().removeChild(someGridnodes[i], true);
}
for(var i = 0; i < someGridopenNodes.length; i++)
{
try{
openFound(someGrid.getRootNode(), someGridopenNodes[i], false);
}catch(err){}
}
openFound(someGrid.getRootNode(), selectedNode, true);
setTimeout(\"someGridRefresh()\", 5000);
});
}
var someGridopenNodes;
function findOpen(node)
{
if(node.isExpanded())
someGridopenNodes.push(node.attributes.row_id);
for(var i = 0; i < node.childNodes.length; i++)
findOpen(node.childNodes[i]);
}
function openFound(node, rowId, doSelection)
{
try{
if(node.attributes.row_id == rowId)
{
if(doSelection)
someGrid.getSelectionModel().select(node);
else
node.expand();
return true;
}
}catch(err){}
var done = false;
for(var i = 0; (i < node.childNodes.length) && !done; i++)
{
var currentFind = openFound(node.childNodes[i], rowId, doSelection);
done = done || currentFind;
}
return done;
}

briantai
25 Aug 2010, 10:11 AM
excellent, thanks!

do you have a demo setup somewhere just so I can see how all the parts are working together?

Reimius
25 Aug 2010, 6:17 PM
I don't actually have one that you can see, since it's displaying confidential information, but I may set up an example on my home server if I get around to it (I'm pretty busy at work and doing a side project for the art community right now at home).