AJAX式多数据源及节点异步加载树_meetrice

预览：

demo.html:

<script type="text/javascript" src="js/Ext.ux.MyTreeLoader/MyTreeLoader.js"></script>
<script type="text/javascript" src="treeloader.js"></script>
<div id="tree-ct"></div>

treeloader.js:

/**//**
 * @include "js/Ext.ux.MyTreeLoader/ColumnNodeUI.js"
 * @include "js/Ext.ux.MyTreeLoader/MyTreeLoader.js"
 * @include "js/Ext.ux.MyTreeLoader/TreeNodeProvider.js"
 */
Ext.BLANK_IMAGE_URL = 'js/ext-2.0/resources/images/default/s.gif';
var flag = true;// To toggle the refresh

Ext.onReady(function() {

    var treeNodeProvider = {
        data : [],// Property in which are set the data to elaborate
        dataUrl : 'addressBook.do?dispatch=queryAddressBook',
        getNodes : function() { // Here you process your data
            return Ext.decode(this.data);
        },
        setData : function(data) {// Called internally by
            // Ext.tree.MyTreeLoader by the method
            // updateTreeNodeProvider
            this.data = data;
        },
        scope : this
            // Could be useful to use when you elaborates data to switch the
            // contextnot used in this example and it's not required
    };

    var treeNodeProvider2 = {
        data : [],// Property in which are set the data to elaborate
        dataUrl : 'companyGroup.do?dispatch=queryGroup',
        getNodes : function() { // Here you process your data
            return Ext.decode(this.data);
        },
        setData : function(data) {// Called internally by
            // Ext.tree.MyTreeLoader by the method
            // updateTreeNodeProvider
            this.data = data;
        },
        scope : this
            // Could be useful to use when you elaborates data to switch the
            // contextnot used in this example and it's not required
    };

    var myTreeLoader = new Ext.tree.MyTreeLoader({
        treeNodeProvider : treeNodeProvider
    });

    var myTreeLoader2 = new Ext.tree.MyTreeLoader({
        treeNodeProvider : treeNodeProvider2
    });

    myTreeLoader.updateTreeNodeProvider(myTreeLoader);// if you want to
    // "preload"
    // the TreePanel with this
    // data

    var ajaxCallGetDataForTree = function(inputParameters) {
        treePanel.body.mask("Loading data");
        setTimeout(ajaxCallbackGetDataForTree, 1000);
    }

    var ajaxCallbackGetDataForTree = function() {

        treePanel.body.unmask();
        treePanel.body.highlight('#c3daf9', {
            block : true
        });
        // Simulating that I have received the response that is treeData2 from
        // the callback of the ajaxCall
        var rootNode = treePanel.getRootNode();// get the rootnode
        var loader = treePanel.getLoader();// Get the loader, note that is of
        // type MyTreeLoader
        loader.updateTreeNodeProvider(myTreeLoader);
        loader.load(rootNode);
    }

    var ajaxCallGetDataForTree2 = function(inputParameters) {
        treePanel.body.mask("Loading data");
        setTimeout(ajaxCallbackGetDataForTree2, 1000);
    }

    var ajaxCallbackGetDataForTree2 = function() {

        treePanel.body.unmask();
        treePanel.body.highlight('#c3daf9', {
            block : true
        });
        // Simulating that I have received the response that is treeData2 from
        // the callback of the ajaxCall
        var rootNode = treePanel.getRootNode();// get the rootnode
        var loader = treePanel.getLoader();// Get the loader, note that is of
        // type MyTreeLoader
        loader.updateTreeNodeProvider(myTreeLoader2);
        loader.load(rootNode);

    }

    var flag = true;
    var basePanelCfg = {
        title : "AJAX式多数据源及节点异步加载",
        preloadChildren : true,
        lines : false,
        clearOnLoad : true,
        rootVisible : false,
        containerScroll : true,
        frame : false,
        collapsible : false,
        animate : true,
        loader : myTreeLoader,
        tbar : [{
            text : "加载通讯录",
            handler : function() {
                // Simulating change the treeNodeProvider of the loader
                var rootNode = treePanel.getRootNode();// get the rootnode
                var loader = treePanel.getLoader();// Get the loader, note that
                // is of type MyTreeLoader
                loader.setTreeNodeProvider(treeNodeProvider);
                // Simulating an ajax call
                ajaxCallGetDataForTree();
            }
        }, {
            text : "加载组织",
            handler : function() {
                // Simulating change the treeNodeProvider2 of the loader
                var rootNode = treePanel.getRootNode();// get the rootnode
                var loader = treePanel.getLoader();// Get the loader, note that
                // is of type MyTreeLoader
                loader.setTreeNodeProvider(treeNodeProvider2);
                // Simulating a different ajax call
                ajaxCallGetDataForTree2();
            }
        }]
    };

    var treePanel = new Ext.tree.TreePanel(basePanelCfg);

    var root = new Ext.tree.AsyncTreeNode({
        text : 'Root',
        draggable : false,
        id : '1'
    });

    treePanel.setRootNode(root);
    treePanel.render('tree-ct');
});

js/Ext.ux.MyTreeLoader/MyTreeLoader.js:

/**//*
 * Version 0.2.3
 * 
 * Ext.tree.MyTreeLoader
 * 
 * @author Dott. Ing. Marco Bellocchi @date 24. April 2008 @license
 * Ext.tree.MyTreeLoader.js is licensed under the terms of the Open Source LGPL
 * 3.0 license.
 * 
 * @include "js/Ext.ux.MyTreeLoader/ColumnNodeUI.js" @include
 * "js/Ext.ux.MyTreeLoader/MyTreeLoader.js" @include
 * "js/Ext.ux.MyTreeLoader/TreeNodeProvider.js"
 * 
 * License details: http://www.gnu.org/licenses/lgpl.html
 */

Ext.tree.MyTreeLoader = function(config) {
    // @private
    var canFireLoadEvent = true;// private
    // @private
    var treeNodeProvider = null;
    // @private
    var loading = false;

    Ext.apply(this, config);
    Ext.tree.MyTreeLoader.superclass.constructor.call(this, config);
    // TO FIX I need to do that for retro compatibility, but you MUST use
    // getTreeNodeProvider to have access to it!
    treeNodeProvider = this.treeNodeProvider;
    // dataUrl = this.dataUrl;

    // @private
    var processResponse = function(o, node, callback) {
        try {
            node.beginUpdate();
            for (var i = 0, len = o.length; i < len; i++) {
                var n = this.createNode(o[i]);
                if (n) {
                    node.appendChild(n);
                }
            }
            node.endUpdate();
        } catch (e) {
            canFireLoadEvent = false;
            this.fireEvent("loadexception", this, node, treeNodeProvider.data);
        }
        // make sure we notify
        // the node that we finished
        if (typeof callback == "function") {
            callback();
        }
        if (canFireLoadEvent === true)
            this.fireEvent("load", this, node, treeNodeProvider.data);// Passing
    }.createDelegate(this);

    // @private
    var requestData = function(node, callback) {
        if (this.fireEvent("beforeload", this, node, callback) !== false) {
            this.transId = Ext.Ajax.request({
                method : this.requestMethod,
                url : treeNodeProvider.dataUrl || treeNodeProvider.url,
                // success: this.handleResponse,
                success : handleResponse,
                failure : this.fireEvent("loadexception", this, node,
                        treeNodeProvider.data),
                scope : this,
                argument : {
                    callback : callback,
                    node : node
                },
                params : this.getParams(node)
            });

        } else {
            canFireLoadEvent = false;
        }
    }.createDelegate(this);

    // @private
    var handleResponse = function(response) {
        var a = response.argument;
        this.processResponse(response, a.node, a.callback);
        this.fireEvent("load", this, a.node, response);
    }.createDelegate(this);

    // @public
    this.load = function(node, callback) {
        canFireLoadEvent = true;// Reset the flag
        if (this.clearOnLoad) {
            while (node.firstChild) {
                var tmpNode = node.firstChild;
                node.removeChild(tmpNode);
                tmpNode.destroy();// Destroy actually cascades, see,
                // http://extjs.com/forum/showthread.php?t=14993
            }
        }
        if (this.doPreload(node)) { // preloaded json children
            if (typeof callback == "function") {
                callback();
            }
        } else if (treeNodeProvider) {
            requestData(node, callback);
        }
    }

    // @public
    this.isLoading = function() {
        return loading;
    }

    // @public
    this.updateTreeNodeProvider = function(obj) {
        if (treeNodeProvider) {
            treeNodeProvider.setData(obj);
        }
    }

    // @public
    this.getTreeNodeProvider = function() {
        return treeNodeProvider;
    }
    // Set a new treeNodeProvider
    // @public
    this.setTreeNodeProvider = function(newTreeNodeProvider) {
        if (newTreeNodeProvider == null
                || (typeof newTreeNodeProvider == 'undefined'))
            throw 'setTreeNodeProvider, newTreeNodeProvider == null || (typeof newTreeNodeProvider == undefined)';
        treeNodeProvider = newTreeNodeProvider;
    }

};
Ext.tree.MyTreeLoader = Ext.extend(Ext.tree.MyTreeLoader, Ext.tree.TreeLoader);