1. #1
    Ext User
    Join Date
    Sep 2007
    Posts
    3
    Vote Rating
    0
    roger.bowman is on a distinguished road

      0  

    Default Stateful TreePanel

    Stateful TreePanel


    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:

    Code:
        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

  2. #2
    Ext User
    Join Date
    Sep 2007
    Posts
    3
    Vote Rating
    0
    roger.bowman is on a distinguished road

      0  

    Default


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

    Code:
        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:

    Code:
    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

  3. #3
    Sencha User
    Join Date
    Apr 2007
    Posts
    90
    Vote Rating
    0
    marcing is on a distinguished road

      0  

    Default


    Just what I needed! Thank You so much!

  4. #4
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by marcing View Post
    Just what I needed! Thank You so much!
    You can view my plugin: http://www.extjs.com/forum/showthrea...943#post212943

    Greetings,

  5. #5
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    306
    Vote Rating
    3
    Scorpie is on a distinguished road

      0  

    Default


    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?
    I`m from Holland!

  6. #6
    Ext User
    Join Date
    Sep 2007
    Posts
    3
    Vote Rating
    0
    roger.bowman is on a distinguished road

      0  

    Default


    Quote Originally Posted by Scorpie View Post
    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.

  7. #7
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    306
    Vote Rating
    3
    Scorpie is on a distinguished road

      0  

    Default


    Quote Originally Posted by roger.bowman View Post
    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?
    I`m from Holland!

  8. #8
    Sencha User
    Join Date
    Apr 2008
    Posts
    365
    Vote Rating
    0
    wuschba is on a distinguished road

      0  

    Default


    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.

  9. #9
    Ext User
    Join Date
    Dec 2010
    Posts
    1
    Vote Rating
    0
    wdrei is on a distinguished road

      0  

    Default


    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.

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

  10. #10
    Sencha User
    Join Date
    Feb 2012
    Posts
    16
    Vote Rating
    0
    ju187 is on a distinguished road

      0  

    Default ExtJS 4

    ExtJS 4


    Hi:

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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar