bug in AsyncTreeNode : expand

[endrem]

when expanding a node and it has not been expanded yet - it does

this.ui.beforeLoad(this);

but it doesnt do a

this.ui.afterLoad(this);

which replaces all the node icons with the spinning wheel.

[endrem]

This will fix the problem:

Ext.override('Ext.tree.AsyncTreeNode', {    expand : function(deep, anim, callback, scope){
        if(this.loading){ // if an async load is already running, waiting til it's done
            var timer;
            var f = function(){
                if(!this.loading){ // done loading
                    clearInterval(timer);
                    this.expand(deep, anim, callback, scope);
                }
            }.createDelegate(this);
            timer = setInterval(f, 200);
            return;
        }
        if(!this.loaded){
            if(this.fireEvent("beforeload", this) === false){
                return;
            }
            this.loading = true;
            this.ui.beforeLoad(this);
            var loader = this.loader || this.attributes.loader || this.getOwnerTree().getLoader();
            if(loader){
                loader.load(this, this.loadComplete.createDelegate(this, [deep, anim, callback, scope]), this);
                this.ui.afterLoad(this);
                return;
            }
            this.ui.afterLoad(this);
        }
        Ext.tree.AsyncTreeNode.superclass.expand.call(this, deep, anim, callback, scope);
    }
});

[Gary Schlosberg]

I don't believe that the AsyncTreeNode has an afterload event. Thanks for sharing your solution with the community.

[endrem]

AsyncTreeNode has no beforeload() either. But AsyncTreeNode extends TreeNode which has a ui member variable which is of instance TreeNodeUI, and it has both beforeload() and afterload():

Ext.tree.TreeNodeUI = Ext.extend(Object, {
...
    // private
    beforeLoad : function(){
         this.addClass("x-tree-node-loading");
    },

    // private
    afterLoad : function(){
         this.removeClass("x-tree-node-loading");
    },
...