Results 1 to 2 of 2

Thread: Async Tree Loading Rapid reloading before complete

  1. #1
    Sencha Premium User rpiwonka's Avatar
    Join Date
    Jul 2007
    Posts
    33
    Vote Rating
    0
      0  

    Default Async Tree Loading Rapid reloading before complete

    Background:
    Our app uses a single tree for 5 differing sets of tree data. Alone or slowly moving between sets of data everything is great. Upon a button click event we are calling tree.root.reload();

    In the OnBeforeLoad event we modify parameters to return the set of data associated with a give button.

    We also use the state manager to save the expanded state and OnLoad restore this state.

    If a user rapidly clicks our "reload" buttons whithout waiting for the tree to finish we were getting errors, only if that user enabled script debugging in IE. Otherwise, all was well. Since we can't control our users browsers settings, I dug into the ext-all-debug and found where the error(s) were occurring.

    Ext.tree.TreeNode.expand, this.getOwnerTree() returns undefined/null, since the tree/parent no longer exists, because we are already loading a new tree.
    The expand function with my single line addition is below:
    Code:
    expand : function(deep, anim, callback){
            if(!this.expanded){
                if(this.fireEvent("beforeexpand", this, deep, anim) === false){
                    return;
                }
                if(!this.childrenRendered){
                    this.renderChildren();
                }
                this.expanded = true;
                if(!this.getOwnerTree()){return;} //line added to return without error
                if(!this.isHiddenRoot() && (this.getOwnerTree().animate && anim !== false) || anim){
                    this.ui.animExpand(function(){
                        this.fireEvent("expand", this);
                        if(typeof callback == "function"){
                            callback(this);
                        }
                        if(deep === true){
                            this.expandChildNodes(true);
                        }
                    }.createDelegate(this));
                    return;
                }else{
                    this.ui.expand();
                    this.fireEvent("expand", this);
                    if(typeof callback == "function"){
                        callback(this);
                    }
                }
            }else{
               if(typeof callback == "function"){
                   callback(this);
               }
            }
            if(deep === true){
                this.expandChildNodes(true);
            }
        },
    The next error occurrs in Ext.tree.TreeNodeUI.prototype.initEvents, again the OwnerTree is undefined or null since it is not there anymore function with fix below:
    Code:
    initEvents : function(){
            this.node.on("move", this.onMove, this);
            var E = Ext.EventManager;
            var a = this.anchor;
    
            var el = Ext.fly(a, '_treeui');
    
            if(Ext.isOpera){ 
                el.setStyle("text-decoration", "none");
            }
    
            el.on("click", this.onClick, this);
            el.on("dblclick", this.onDblClick, this);
    
            if(this.checkbox){
                Ext.EventManager.on(this.checkbox,
                        Ext.isIE ? 'click' : 'change', this.onCheckChange, this);
            }
    
            el.on("contextmenu", this.onContextMenu, this);
    
            var icon = Ext.fly(this.iconNode);
            icon.on("click", this.onClick, this);
            icon.on("dblclick", this.onDblClick, this);
            icon.on("contextmenu", this.onContextMenu, this);
            E.on(this.ecNode, "click", this.ecClick, this, true);
    
            if(this.node.disabled){
                this.addClass("x-tree-node-disabled");
            }
            if(this.node.hidden){
                this.addClass("x-tree-node-disabled");
            }
            var ot = this.node.getOwnerTree();
            if(!ot){return;}//return here without error
            var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
            if(dd && (!this.node.isRoot || ot.rootVisible)){
                Ext.dd.Registry.register(this.elNode, {
                    node: this.node,
                    handles: this.getDDHandles(),
                    isHandle: false
                });
            }
        },
    I don't know if anyone else will care much about this or if this "fix" is actually the desired method for our problem. Seems to work in our case. Again, this only occurs if the user turns on script debugging in IE.

    IE7 and IE6, FF not tested
    Ext1.1.1

    Please let me know if this makes it into a new build. I can then stop tracking my changes to ext source. Thank you. Love the product! Can't wait to try out 2.0 on our app!

  2. #2
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    while this is being investigated, you should use the Ext.override() method to implement your custom code in a custom overrides js file (included after ext-all.js / ext-all-debug.js) instead of making changes to the code base directly, like so
    Code:
    Ext.override(Ext.tree.TreeNode, {
      expand: function(deep, anim, callback) {
        // your custom code
      }
    });
    
    Ext.override(Ext.tree.TreeNodeUI, {
      initEvents: function() {
        // your custom code
      }
    })
    this way you won't have to "track changes to the Ext source".

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •