[CLOSED] Making a TreePanel stateful

[jwillmott]

Is there a good example somewhere of a TreePanel which saves the expanded/collapsed state of the tree nodes in the user's cookies?

I've been trying to do this on and off for a number of months. My gut feel is that it should be simple. Perhaps there is something I am missing.

My code at the moment is included below. When I expand some nodes and refresh (F5) the tree reappears in the default state (no nodes expanded).

<ext:TreePanel 
    ID="TreePanel1" 
    runat="server" 
    AutoHeight="true" 
    Visible="true"
    RootVisible="false"
    Stateful="true"
    Lines="false"
    StateEvents="collapseNode,expandNode"
    StateID="Home1"
    >
    
    
    <Loader >
        <ext:PageTreeLoader OnNodeLoad="NodeLoad" />
    </Loader>
    
    <Root>
        <ext:AsyncTreeNode NodeID="R_0" Text="Root" />
    </Root>
</ext:TreePanel>

[Daniil]

Hi,

Here is a quote from ExtJS docs.

To save state, a stateful Component first serializes its state by calling getState.

http://dev.sencha.com/deploy/dev/doc...ember=stateful


By default there is no getState() method in TreePanel. You have to implement this method.

Here is a simple example.
http://forums.ext.net/showthread.php...of-Radio-State

Also, I think, StateEvents must be lower-case.

StateEvents="collapsenode,expandnode"

[jwillmott]

Thanks for the quick reply Daniil.

I looked around the web for examples of serialization/deserialization of the node state and found this from Roger Bowman:

http://www.sencha.com/forum/showthre...eful-TreePanel

I've made some minor modifications of his code and got it working nicely.

Worked into my original code sample, this is what it looks like:

<script type="text/javascript">

function getState(tree) {
    var nodes = [];
    tree.getRootNode().eachChild(function (child) {
        //function to store state of tree recursively
        var storeTreeState = function (node, expandedNodes) {
            if(node.isExpanded() && node.childNodes.length > 0) {
                expandedNodes.push(node.getPath());
                node.eachChild(function (child) {
                    storeTreeState(child, expandedNodes);
                });
            }
        };
        storeTreeState(child, nodes);
    });
        
    return {
        expandedNodes : nodes
    }
}

function restoreState(tree,state) {
    var nodes = state.expandedNodes;
    for(var i = 0; i < nodes.length; i++) {
        if(typeof nodes[i] != 'undefined') {
            tree.expandPath(nodes[i]);
        }
    }
}
</script>

<ext:TreePanel 
    ID="TreePanel1" 
    runat="server" 
    AutoHeight="true" 
    Visible="true"
    RootVisible="false"
    Stateful="true"
    Lines="false"
    StateEvents="collapseNode,expandNode"
    StateID="Home1"
    >
    
    <GetState Handler="return getState(this)" />
    <Listeners>
        <StateRestore Handler="restoreState(this,state)" />
    </Listeners>
    <Loader >
        <ext:PageTreeLoader OnNodeLoad="NodeLoad" />
    </Loader>
    
    <Root>
        <ext:AsyncTreeNode NodeID="R_0" Text="Root" />
    </Root>
</ext:TreePanel>

...Hope that's helpful!

[Daniil]

Thank you for sharing the solution. I'm sure it will help someone.