1. #1
    Sencha User
    Join Date
    Jun 2007
    Posts
    46
    Vote Rating
    6
    kesteb is on a distinguished road

      0  

    Default Creating a statefull tree panel

    Creating a statefull tree panel


    I have been playing with the state stuff and decided to create a statefull tree panel, There are several examples laying around so it is just a matter of choosing one and porting it to 4.0. I wanted one that saved the expanded/collapsed state. So here is an example of an extended class.

    PHP Code:
    /*
     * File: TreePanel.js
     * Date: 26-Jul-2011
     * By  : Kevin L. Esteb
     *
     * This module extends Ext.tree.Panel to allow for the saving of the
     * expanded/collapse state of the tree.
     *
     */

    Ext.define('XAS.desktop.lib.TreePanel', {
        
    extend'Ext.tree.Panel',
        
    alias'xas.treepanel',
        
    uses: [
            
    'Ext.tree.Panel'
        
    ],

        
    initComponent: function() {

            
    Ext.apply(this, {

                
    statefultrue,
                
    stateIdthis.id '-state',
                
    stateEvents: ['itemcollapse','itemexpand']

            });

            
    this.callParent(this);

        },

        
    getState: function() {
                var 
    nodes = [], state this.callParent();

            var 
    getPath = function(nodefieldseparator) {

                
    field field || node.idProperty;
                
    separator separator || '/';

                var 
    path = [node.get(field)], parent node.parentNode;

                while (
    parent) {

                    
    path.unshift(parent.get(field));
                    
    parent parent.parentNode;

                }

                return 
    separator path.join(separator);

            };

            
    this.getRootNode().eachChild(function(child) {

                
    // function to store state of tree recursively

                
    var storeTreeState = function(nodeexpandedNodes) {

                    if (
    node.isExpanded() && node.childNodes.length 0) {

                        
    expandedNodes.push(getPath(node'text'));
                        
    node.eachChild(function(child) {

                            
    storeTreeState(childexpandedNodes);

                        });

                    }

                };

                
    storeTreeState(childnodes);

            });

            
    Ext.apply(state, {
                
    expandedNodesnodes
            
    });

            return 
    state;

        },

        
    applyState: function(state) {
            var 
    nodes state.expandedNodes || [],
                
    len nodes.length;

            
    this.collapseAll();

            for (var 
    0leni++) {

                if (
    typeof nodes[i] != 'undefined') {

                    
    this.expandPath(nodes[i], 'text');

                }

            }

            
    this.callParent(arguments);

        }

    }); 
    This does everything that I want. When the class initializes, the applyState() method is called, when you expand a node, the getState() method is called and that state is saved. So I decided to try a plugin. Here is the code for that:

    PHP Code:
    /*
     * File: TreePanel.js
     * Date: 26-Jul-2011
     * By  : Kevin L. Esteb
     *
     * This module is a plugin to Ext.tree.Panel that allows
     * it to save the expanded/collapse state of the tree.
     *
     */

    Ext.define('Ext.ux.state.plugins.TreePanel', {
        
    extend'Ext.AbstractPlugin',
        
    alias'state.plugins.treepanel',
        
    uses: [
            
    'Ext.AbstractPlugin'
        
    ],

        
    init: function(treePanel) {

            if (
    treePanel.stateEvents) {

                
    treePanel.stateEvents.push('itemcollapse');
                
    treePanel.stateEvents.push('itemexpand');

            } else {

                
    treePanel.stateEvents = [];
                
    treePanel.stateEvents.push('itemcollapse');
                
    treePanel.stateEvents.push('itemexpand');

            };

            if (! 
    treePanel.stateId) {

                
    treePanel.stateId treePanel.id '-state';

            }

            if (! 
    treePanel.state) {

                
    treePanel.state true;

            }

            
    treePanel.getState this.getState;
            
    treePanel.applyState this.applyState;

        },

        
    getState: function() {
                var 
    nodes = [], state Ext.tree.Panel.superclass.getState.apply(this);

            var 
    getPath = function(nodefieldseparator) {

                
    field field || node.idProperty;
                
    separator separator || '/';

                var 
    path = [node.get(field)], parent node.parentNode;

                while (
    parent) {

                    
    path.unshift(parent.get(field));
                    
    parent parent.parentNode;

                }

                return 
    separator path.join(separator);

            };

            
    this.getRootNode().eachChild(function(child) {

                
    // function to store state of tree recursively

                
    var storeTreeState = function(nodeexpandedNodes) {

                    if (
    node.isExpanded() && node.childNodes.length 0) {

                        
    expandedNodes.push(getPath(node'text'));
                        
    node.eachChild(function(child) {

                            
    storeTreeState(childexpandedNodes);

                        });

                    }

                };

                
    storeTreeState(childnodes);

            });

            
    Ext.apply(state, {
                
    expandedNodesnodes
            
    });

            return 
    state;

        },

        
    applyState: function(state) {
            var 
    nodes state.expandedNodes || [], len nodes.length;

            
    this.collapseAll();

            for (var 
    0leni++) {

                if (
    typeof nodes[i] != 'undefined') {

                    
    this.expandPath(nodes[i], 'text');

                }

            }

            
    Ext.tree.Panel.superclass.applyState.apply(thisarguments);

        }

    }); 
    This code is basically the same as the extended class. It sorta works most of the time. When the plugin initializes it doesn't call the applyState() method, when a node is expanded or collapsed it sometimes calls the getState() method. The state is sometimes saved. So I must be missing something with plugins. Anybody have any suggestions.

  2. #2
    Sencha User
    Join Date
    Apr 2011
    Location
    Bamberg Germany
    Posts
    26
    Vote Rating
    0
    dotti is on a distinguished road

      0  

    Default


    I tryed the extended class version and i have the same problemn like you with the plugin.
    In my case the state is saved befor the state is loaded to the tree.
    If I put a breaker(firebug) in applyState() then the timing is ok.
    The state is loaded first and then saved again...

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    66
    Vote Rating
    0
    dontbugme is on a distinguished road

      0  

    Default Updated?

    Updated?


    Any updates to this code?

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    1
    Vote Rating
    0
    AlexTiTanium is on a distinguished road

      0  

    Default


    I make extjs 4 plugin for that:
    https://github.com/AlexTiTanium/ExtJsStatefulTree

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi