Stateful TreePanel

[roger.bowman]

Hello all!

Since I couldn't find a way to make a TreePanel remember it's state (i.e. remember which nodes were expanded/collapsed), I figured I would post my solution here.

All I had to do was add the following to my TreePanel configuration:

    stateEvents : ['collapsenode', 'expandnode'],
    stateId : 'tree-panel-state-id',
    stateful : true,
    getState : function () {
        var nodes = [];
        this.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
        }
    },
    applyState : function (state) {
        var that = this;
        this.getLoader().on('load', function () {
            var nodes = state.expandedNodes;
            for(var i = 0; i < nodes.length; i++) {
                if(typeof nodes[i] != 'undefined') {
                    that.expandPath(nodes[i]);
                }
            }
        });
    }

Any comments/suggestions are more than welcome!

Cheers,
-Roger

[roger.bowman]

To keep state while refreshing the tree, I added a refresh button to the tree panel tool bar:

    id : 'refresh',
    qtip : 'Refresh',
    handler : function (event, toolEl, panel) {
        var thisTreePanel = panel.getComponent('tree-panel');
						
	//get state from tree
	var state = thisTreePanel.getState();
	panel.body.mask('Loading', 'x-mask-loading');

        thisTreePanel.getLoader().load(thisTreePanel.getRootNode(), function () {
	    panel.body.unmask();
            thisTreePanel.applyState(state);							
	});
    }

However, I was having issues where if I collapsed a node, it would not remember that the node was collapsed when I refreshed the tree. If I reloaded the entire page, however, it would remember that the node was collapsed. With that in mind, I changed the applyState method above to the following:

applyState : function (state) {
    var that = this;
    this.getLoader().on('load', function () {
        //read state in from cookie, not from what is passed in
        var cookie = Ext.state.Manager.get('content-manager-tree-panel');
        var nodes = cookie.expandedNodes;
        for(var i = 0; i < nodes.length; i++) {
            if(typeof nodes[i] != 'undefined') {
                that.expandPath(nodes[i]);
            }
        }
    });
}

Hope this helps someone. Please let me know what you think/anything I could do better/any bugs you find.

Thanks,
-Roger

[marcing]

Just what I needed! Thank You so much!

[galdaka]

Just what I needed! Thank You so much!

You can view my plugin: http://www.extjs.com/forum/showthrea...943#post212943

Greetings,

[Scorpie]

This looks like something I need for my problem described here: http://www.extjs.com/forum/showthread.php?t=46252

Does this also work with getting & selecting the previous selected Node?

[roger.bowman]

This looks like something I need for my problem described here: http://www.extjs.com/forum/showthread.php?t=46252

Does this also work with getting & selecting the previous selected Node?

AFAIK, it does not. It only "remembers" which nodes were expanded/collapsed.

[Scorpie]

AFAIK, it does not. It only "remembers" which nodes were expanded/collapsed.

Ah I see. Do you happen to know a solution for my problem?

[wuschba]

Greate code, thanks a lot!

One thing:
var cookie = Ext.state.Manager.get('content-manager-tree-panel');

'content-manager-tree-panel' -> Should be the stateId of the TreePanel. Otherwise it worked right out of the box.

[wdrei]

Thanks a lot. That was missing.

One problem remained. Due to the event listener you made within the applyState method, the restore process is done everytime a node is opened or closed. Beside the fact, that this is not necessary and consumes client resources it restored previously collapsed node when using the singleExpand property set to true.

I took a while to me seeing the point. If you change the applyState methode as follows (just remove the listener), the restore process is done only once at load.

applyState : function (state) {
	var nodes = state.expandedNodes;
	for(var i = 0; i < nodes.length; i++) {
		if(typeof nodes[i] != 'undefined') {
	    	this.expandPath(nodes[i]);
		}
	}
}

[ju187]

Hi:

Any plan to update it make it work in V4? Lots of objects and methods are changed.