PDA

View Full Version : How to save TreePanel state after reload() ?



CuamckuyKot
27 Jan 2008, 1:00 PM
I need to reload treePanel, but its state doesn't saved.
How exactly can I save treePanel state?
Please, help.

CuamckuyKot
27 Jan 2008, 3:55 PM
Is there anyone who knows?

thatcoder
27 Jan 2008, 5:00 PM
Is the Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); initialized when the application is loaded?

CuamckuyKot
28 Jan 2008, 1:02 AM
Yes, of course.


Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/ext-2.0.1/resources/images/default/s.gif';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
path: "/",
expires: new Date(new Date().getTime()+(1000*60*60*24*30)), //30 days
}));
...................

CuamckuyKot
28 Jan 2008, 1:04 AM
And tree config:

var MyTree = new Ext.tree.TreePanel({
loader: MyTreeLoader,
root: MyTreeRoot,
border: false,
height: 500,

stateful: true,
stateEvents: ['click','contextmenu','hide','show','destroy','collapsenode'],
});
In spot MyTreeRoot.reload() is called and it's needed to be the same state as it were before.

CuamckuyKot
28 Jan 2008, 2:39 AM
Does someone have mind in this?

CuamckuyKot
28 Jan 2008, 3:17 AM
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
....
var MyTree = new Ext.tree.TreePanel({
loader: MyTreeLoader,
root: MyTreeRoot,
border: false,
height: 500,
singleExpand: true,
stateful: true,
stateEvents: ['collapsenode','expandnode'],
});
CookieProvider is set. Stateful param and stateEvents array has been set already. But on reload() the state couldn't be restored.

CuamckuyKot
28 Jan 2008, 3:48 AM
Anyone got idea? Please, help.

CuamckuyKot
28 Jan 2008, 5:21 AM
Any ideas?

CuamckuyKot
28 Jan 2008, 9:23 AM
Please, help...

hendricd
28 Jan 2008, 10:02 AM
Have you tried something like:


MyTreeRoot.reload();
MyTreeRoot.saveState.defer(200);
Then anytime a load/reload occurs, state is persisted.

CuamckuyKot
28 Jan 2008, 10:33 AM
MyTreeRoot.saveState has no properties
I've solved my problem, but partly.
In fact, I get that AsyncTreeNode doesn't implements any state operations!
In this case, I used state cookieProvider, save currentPath in cookie on path change, and expand it after reload. But it works only with current path - with one branch of tree.

hendricd
28 Jan 2008, 12:04 PM
Sorry, that should be myTree.saveState()

symfony
22 Feb 2008, 1:15 AM
Could you please explain how you've solved the problem? I've the same problem for saving an asyncron loaded tree. Thank you!

bendavis78
7 May 2008, 6:48 AM
The TreePanel can be extended to support save state. Here's what I did. You may want to modify for your specific needs:



//implement getState for TreePanel to make stateful work
Ext.override(Ext.tree.TreePanel, {
getState: function() {
//get current expanded nodes
var state = [];
for(var id in this.nodeHash)
{
var node = this.nodeHash[id];
if (node.expanded)
{
var path = node.getPath();
var add = true;

//remove path's parents
var parents = node.getParentNodes();
for (var i=0; i<parents.length; i++)
{
state.remove(parents[i].getPath());
//if any of its parents are collapsed, don't add
if (!parents[i].expanded) add = false;
}

if (add)
{
state.push(node.getPath());
}
}
}
return state;
},

applyState : function(state, config) {
if (state && state.length > 0)
{
for (var i=0; i<state.length; i++)
{
var path = state[i];
this.addListener('render', function(){
this.expandPath(path);
});
}
return true;
}

}
});

SergeyTen
9 Jun 2009, 2:56 AM
It is my implement of save state of tree. This implement saves expanded and checked nodes. Hope it helps somebody :)



getState: function()
{
var state = new Object();
var expanded = [];
var checked = [];

for(var id in this.nodeHash)
{
var node = this.nodeHash[id];

if(node.expanded)
{
expanded.push(node.getPath());

if(!node.isRoot)
{
expanded.remove(node.parentNode.getPath());
}
}

if(node.attributes.checked)
{
checked.push(node.attributes.id);
}

}

state = {
"expanded": expanded,
"checked": checked
};

return state;
},
applyState : function(state, config)
{
if(state.expanded && state.expanded.length > 0)
{
for(var i = 0; i < state.expanded.length; i++)
{
var path = state.expanded[i];

this.addListener('render', function()
{
this.expandPath(path);
});
}
}

if(state.checked && state.checked.length > 0)
{
this.addListener('append', function(tree, parent, node)
{
if(inArray(node.attributes.id, state.checked))
{
node.attributes.checked = true;
}
});
}
},
stateEvents: ['expandnode', 'checkchange', 'collapsenode']


function inArray(val, arr)
{
if(arr)
{
for(var i = 0; i < arr.length; i++)
{
if(arr[i] == val)
{
return true;
}
}

return false;
}

return false;
}