ExtJS - Save State of treePanel.

Question

TLDR I want my treepanel from EXTJS to remember its previous settings. ExtJS-3.2.1

---

I have seen this done before for ExtJS-2.x.x :See here on the extjs forums.
But as seen as they are pretty much lifeless, with threads on there asking this question or similar with no reply for up to 6months. I thought I would bring it here.

I need to be able to get my treePanel to remember previous opened folders and which boxes are checked. It is async treePanel. Note that this is all client side script.

Panel is as follows:

 var layerTree = new Ext.tree.TreePanel({
                    border: true,
                    region: "east",
                    title: 'LayersTree',
                    width: 250,
                    split: true,
                    collapsible: true,
                    collapsed: true,
                    iconCls: 'treePanelIcon',
                    enableDD: true,
                    autoScroll: true,
                    //pulls in layers and their attributes//
                    root: new Ext.tree.AsyncTreeNode({ leaf: false,
                        loaded: false,
                        expanded: true,
                        text: 'Tree Root',
                        children: treeLayers
                    })

Am using ExtJS-3.2.1, GeoExt, OpenLayers.

Anyone done this before or know how to do it? (in extjs-3.2.1)
(Preferably with a plugin but any answer is appreciated)

Anyone know how to use the save state function of extjs to bind to a cookie?

Answer 1

I know this won't answer all of your question exactly but I have done this recently mostly all on the server-side of things. The key thing to know is that even if you use AsyncTreeNodes, you can still specicify in the nodes the children property which will contain another array of nodes.

So, in the URL function called by the TreeLoader instance of my TreePanel I made sure to save the 'path' of the node being loaded in a the database (the point for us was to persist this state on the server). So I save in that database what level and value of the loaded node and it's parents.

To do this I added a listener to the loader beforeLoad event and set that information in the loader's baseParams property.

Then I made it so that this same function on the server that is called by the loader, if loading the root Node's children, will also recursively call itself to gather the children nodes (based on what I saved in the database). So the actual JSON returned to the loader for the root node looks like this:

[
    {
        "x3id": "",
        "text": "[blank value]",
        "iconCls": "",
        "leaf": false,
        "expanded": true,
        "children": [
            {
                "x3id": "",
                "text": "[blank value]",
                "iconCls": "",
                "leaf": false,
                "expanded": true,
                "children": [
                    {
                        "x3id": "",
                        "text": "[blank value]",
                        "iconCls": "",
                        "leaf": false,
                        "expanded": true,
                        "children": [
                            {
                                "x3id": false,
                                "text": "False",
                                "iconCls": "",
                                "leaf": false,
                                "expanded": true,
                                "children": [
                                    {
                                        "x3id": 0,
                                        "text": "0",
                                        "iconCls": "fakeleaf",
                                        "leaf": true,
                                        "expanded": true,
                                        "children": [

                                        ],
                                        "expandable": false 
                                    },
                                    {
                                        "x3id": 1,
                                        "text": "1",
                                        "iconCls": "fakeleaf",
                                        "leaf": true,
                                        "expanded": true,
                                        "children": [

                                        ],
                                        "expandable": false 
                                    } 
                                ] 
                            } 
                        ] 
                    } 
                ] 
            } 
        ] 
    },
    {
        "x3id": "Wed, 19 May 2010 16:17:00 -0400",
        "text": "05/19/2010 04:17:00 PM",
        "iconCls": "",
        "leaf": false,
        "expanded": false,
        "children": "" 
    }
]

Note that the state will then remember only the last 'loaded' nodes, not necessarily the last selected and/or opened. To do so you'd have to listen to the click event of the TreePanel or something to save that information.

So of course this won't handle the checkboxes which I think you are using, but if you listen to the right event you could make a callback to the server to save this information and then add the checked property to the childrens in the initial JSON. Hope this helps!