1. #11
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    Post what you've got so far (or something to start with)....
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  2. #12
    Ext User mjoksa's Avatar
    Join Date
    Jun 2007
    Posts
    73
    Vote Rating
    0
    mjoksa is on a distinguished road

      0  

    Default Here is my solution

    Here is my solution


    Before start doing explanation of code I need to mention which threads I've consulted during developing this solution. Here are they:
    1) How to use stateEvents
    Ext.Tree.TreePanel stateEvent beforemove
    http://extjs.com/forum/showthread.ph...ht=stateEvents
    2) How to save TreePanel state
    Saving tree state example
    http://extjs.com/forum/showthread.ph...anel+saveState
    I've just combined stuff from those threads (sorry if I forgot to mention any other) into extension which is presented on bellow code:

    Code:
    * @extends Ext.tree.TreePanel
     
     * Provides statefull TreePanel - TreePanel remember expanded nodes and selected node
     
     * @constructor
     * var treePanel = new Ext.ux.TreePanelStatefull({
            cp: cookieProvider, <--- this CookieProvider holds TreePanel state
            ...add rest TreePanel options
       }); 
    ***********************************************************************************/
    Ext.ux.TreePanelStatefull = Ext.extend(Ext.tree.TreePanel, {
        //CookieProvider - hold state of TreePanel
        cp: new Ext.state.CookieProvider({ expires: null }),
        //TreePanel state - simple array
        state: new Array(),
        
        /***** Events which cause TreePanel to remember its state
         * click, expandnode, collapsenode, load, textchange,
         * remove, render
        ********************************************************/
        stateEvents: [{
            click: {
                fn: function(node) {
                    var i = 0;
                    //var treePanel = node.getOwnerTree();
                    this.cp.set('LastSelectedNodePath_' + this.id, node.getPath());
                    this.cp.set('LastSelectedNodeId_' + this.id, node.id);
                }
            },
            expandnode: {
                fn: function(node) {
      	            var currentPath = node.getPath();
      	            var newState = new Array();
            	    
    	            for (var i = 0; i < this.state.length; ++i) 
    	            {
    		            var path = this.state[i];
            		    
    		            if (currentPath.indexOf(path) == -1) 
    		            {
    			            // this path does not already exist
    			            newState.push(path);			
    		            }
    	            }
            	    
    	            // now ad the new path
    	            newState.push(currentPath);
    	            this.saveState(newState);
                }
            },
            collapsenode: {
                fn: function(node) {
                    var closedPath = node.getPath();
                    var newState = new Array();
                    
                    for (var i = 0; i < this.state.length; ++i) 
                    {
    	                var path = this.state[i];
    	                if (path.indexOf(closedPath) == -1) 
    	                {
    		                // this path is not a subpath of the closed path
    		                newState.push(path);			
    	                }
                    }
            	    
                    if (newState.length == 0) 
                    {
    	                var parentNode = node.parentNode;
    	                newState.push((parentNode == null ? this.pathSeparator : parentNode.getPath()));
                    }
            	    
                    this.saveState(newState);
                }
            },
            load: {
                fn: function(node) {
                    var lastSelectedNodePath = this.cp.get('LastSelectedNodePath_' + this.id);
                    var lastSelectedNodeId = this.cp.get('LastSelectedNodeId_' + this.id);
                    
                    var childNode = node.findChild('id', lastSelectedNodeId);
                
                    if(lastSelectedNodePath == this.root.getPath() && !node.isSelected())
                    {
                        node.select();
                    }
                    else if(childNode && childNode.isLeaf())
                    {
                        childNode.ensureVisible();
                        childNode.select();
                        childNode.fireEvent('click', childNode);
                    }
                    
                    if(node.isSelected())
                    {
                        node.fireEvent('click', node);
                    }
                }
            },
            textchange: {
                fn: function(node, text, oldText) {
                    var lastSelectedNodePath = this.cp.get('LastSelectedNodePath_' + this.id);
                    var newSelectedNodePath = lastSelectedNodePath.replace(oldText, text);
                    
                    this.cp.set('LastSelectedNodePath_' + this.id, newSelectedNodePath);            
                    
                    this.expandPath(node.getPath());
                    this.selectPath(node.getPath());
                }
            },
            remove: {
                fn: function(tree, parent, node) {
                    this.cp.set('LastSelectedNodePath_' + this.id, parent.getPath());
                    this.cp.set('LastSelectedNodeId_' + this.id, parent.id);
                }
            },
            render: {
                fn: function() {
                    var lastSelectedNodePath = this.cp.get('LastSelectedNodePath_' + this.id);
    	            var lastSelectedNodeId = this.cp.get('LastSelectedNodeId_' + this.id);
            	            
                    //this.root.reload();
                    
                    this.state = this.cp.get('TreePanelStatefull_' + this.id, new Array()); 
    	            this.restoreState(this.root.getPath());	    
            	    
    	            if(!lastSelectedNodePath && !lastSelectedNodeId)
    	            {
    	                this.cp.set('LastSelectedNodePath_' + this.id, this.root.getPath());
    	                this.cp.set('LastSelectedNodeId_' + this.id, this.root.id);
            	        
    	                this.expandPath(this.root.getPath());
    	                this.selectPath(this.root.getPath());
    	            }
    	            else
    	            {	    
    	                this.expandPath(lastSelectedNodePath);
    	                this.selectPath(lastSelectedNodePath);      
    	            }
                }
            }
        }],
        
        //Function which saves TreePanel state
        saveState : function(newState) {
    	    this.state = newState;
    	    this.cp.set('TreePanelStatefull_' + this.id, this.state);
        },
        
        //Function which restores TreePanel state
        restoreState : function(defaultPath) {	
    	    if (this.state.length == 0) {
    		    var newState = new Array(defaultPath);
    		    this.saveState(newState);		
    		    this.expandPath(defaultPath);
    		    return;
    	    }
    	    
    	    for (var i = 0; i < this.state.length; ++i) {
    		    // activate all path strings from the state
    		    try {
    			    var path = this.state[i];
    		        this.expandPath(path);
    		    } 
    		    catch(e) {
    			    // ignore invalid path, seems to be remove in the datamodel
    			    // TODO fix state at this point
    		    }
    	    }	
        }
    });
    This code is not much tested, so if anyone have any improvements please free to change it, but please submit you changes so everybody can benefit from it.
    10x

    FOR FUTURE REVISIONS
    1) Add support for drag and drop

    P.S. In attachment I added complete code for this extension

    2008-09-24
    I've just finished some minor improvements for this extension (plugin) and posted new file.
    Cheers
    Attached Files
    Last edited by mjoksa; 24 Sep 2008 at 3:11 AM. Reason: I've corrected some minor things and posted new file

  3. #13
    Ext User mjoksa's Avatar
    Join Date
    Jun 2007
    Posts
    73
    Vote Rating
    0
    mjoksa is on a distinguished road

      0  

    Default Some problems with TreePanelStatefull

    Some problems with TreePanelStatefull


    I've tested code I've posted here for TreePanelStatefull, refactor it and attached in this message.
    New code seems to work fine (I just hope so but I've noticed some (one) problem with it.
    When page is reloaded, tree panel is reloaded, nodes are expanded and last selected node is selected. But, when I reload tree panel with tree.root.reload() somehow this command delete expanded and selected nodes form cookie and just reload tree panel - no nodes are expanded and selected. For now I don't know if this is problem with my extension or EXT so if anyone have any idea please help.
    10x
    Attached Files

  4. #14
    Ext User
    Join Date
    Apr 2008
    Posts
    2
    Vote Rating
    0
    robbi83 is on a distinguished road

      0  

    Default


    You have to suspend all event (tree.suspendEvents()) before reload and after this reload you must call the resumeEvents()-method to ensure that the tree is expanded as saved in the cookie provider

  5. #15
    Ext User mjoksa's Avatar
    Join Date
    Jun 2007
    Posts
    73
    Vote Rating
    0
    mjoksa is on a distinguished road

      0  

    Default Thanks...

    Thanks...


    @robbi83
    Thanks, that is just what I needed.

  6. #16
    Ext User mjoksa's Avatar
    Join Date
    Jun 2007
    Posts
    73
    Vote Rating
    0
    mjoksa is on a distinguished road

      0  

    Default Here is some new code...

    Here is some new code...


    Recently, i had some free time and I implement saving tree panel state in two different ways:
    1. Extended Ext.tree.TreePanel (file TreePanelStatefull_extension.txt)
    2. Plugin for Ext.tree.TreePanel (file TreePanelStatefull_plugin.txt)
    Basically, they do the same job, remember tree state. I prefer second solution because it is plugin.
    So, feel free to use any solution, but please, if you change code post it here, so everyone can benefit from it.
    Also, if anyone know how or where can I report this as valid plugin and/or extension on other forum threads please inform me and I will move it there.
    Attached Files

  7. #17
    Ext User
    Join Date
    Jun 2008
    Posts
    3
    Vote Rating
    0
    tmickler is on a distinguished road

      0  

    Default


    Great work! I used the files the extension class that you provided and I got a error that Ilumnis.cookieProvider was not known.

  8. #18
    Ext User mjoksa's Avatar
    Join Date
    Jun 2007
    Posts
    73
    Vote Rating
    0
    mjoksa is on a distinguished road

      0  

    Default just simple solution ;)

    just simple solution ;)


    Quote Originally Posted by tmickler View Post
    Great work! I used the files the extension class that you provided and I got a error that Ilumnis.cookieProvider was not known.
    Sorry for that mistake. I use this:
    Ilumnis.cookieProvider = new Ext.state.CookieProvider({expires: null});
    so, as you can see it is just CookieProvider

  9. #19
    Ext User
    Join Date
    Jun 2008
    Posts
    3
    Vote Rating
    0
    tmickler is on a distinguished road

      0  

    Default


    Thanks. I got that put in. I followed the advice in http://extjs.com/forum/showthread.php?t=19656 so that I could test the refresh of my tree. I have a few questions. My tree is always expanding on the refresh. I don't think that I have any expand or autoexpand properties set to true. What should I look for to fix this? Also, is there some way to keep the tree from removing all the items and adding them back on the refresh.

    Again, thanks for the help.

  10. #20
    Ext User mjoksa's Avatar
    Join Date
    Jun 2007
    Posts
    73
    Vote Rating
    0
    mjoksa is on a distinguished road

      0  

    Default


    Quote Originally Posted by tmickler View Post
    Thanks. I got that put in. I followed the advice in http://extjs.com/forum/showthread.php?t=19656 so that I could test the refresh of my tree. I have a few questions. My tree is always expanding on the refresh. I don't think that I have any expand or autoexpand properties set to true. What should I look for to fix this? Also, is there some way to keep the tree from removing all the items and adding them back on the refresh.

    Again, thanks for the help.
    When you use code for TreePanelStatefull it will expand tree every time when tree is reloaded. This is expected behavior cause I needed my tree panel to behave like this . If you want to change this you will need to exclude TreePanelStatefull plugin, but than you have plain old tree which will not remember its state.
    When you refresh tree it will call tree loader to load nodes from server. Also, this is expected behavior cause you are loading nodes with AJAX.

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