Ext树工具类 Jsontree和Xmltree

使用说明:
使用本工具类,可以快速从xml和json文件中创建EXT树.
预览:

tree.html:

< SCRIPT src = " js/jsontree.js "  type = text / javascript>< / SCRIPT >
< SCRIPT src = " js/xmltree.js "  type = text / javascript>< / SCRIPT >
< / HEAD>
< BODY >
< div id = " jsontree " >< / div>
< div id = " xmltree " >< / div>
< / BODY>
< / HTML>
< script type = " text/javascript " >
Ext.BLANK_IMAGE_URL  =   ' js/ext-2.0/resources/images/default/s.gif ' ;
var  jsontree  =   new  createJsonTree( " jsontree " ,  " tree.json " ,  function ()  {
    jsontree.render();
    this.getRootNode().expand();
} );

var  menuTree  =   new  createXmlTree( " xmltree " ,  " tree.xml " ,  function ()  {
    menuTree.render();
    this.getRootNode().expand();
} );
< / script>

jsontree.js:

function  createJsonTree(el, url, callback)  {

    var tree = new Ext.tree.TreePanel({
        el : el,
        animate : true,
        border : false,
        autoHeight : true,
        rootVisible : true
    });

    var treeNodesFromArray = function(parentNode, children) {

        Ext.each(children, function(child) {
            var node = new Ext.tree.TreeNode({
                text : child.text,
                url : child.url,
                color : child.color,
                menuid : child.menuid,
                expanded : child.expanded
            });
            if (!parentNode) {
                tree.setRootNode(node);
            } else {
                parentNode.appendChild(node);
            }

            if (child.children) {
                treeNodesFromArray(node, child.children);
            }
        }, this);
    };

    try {

        var proxy = new Ext.data.HttpProxy({
            url : url
        });

        proxy.on("loadexception", function(o, response, e) {
            if (e)
                throw e;
        });

        proxy.load(null, {
            read : function(response) {
                var treeJson = Ext.util.JSON.decode(response.responseText);
                treeNodesFromArray(null, treeJson);
                callback.call(tree);
            }
        }, function() {
        }, this);

    } catch (e) {

    }
    return tree;
}

xmltree.js

function  loadXMLext(xmlStr)  {

    if (!xmlStr)
        return null;
    if (window.ActiveXObject) {
        var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
    } else {
        if (document.implementation && document.implementation.createDocument) {
            var xmlDom = document.implementation
                    .createDocument("", "doc", null)
        }
    }
    xmlDom.async = true;
    try {
        xmlDom.loadXML(xmlStr);
    } catch (e) {
        var oParser = new DOMParser();
        xmlDom = oParser.parseFromString(xmlStr, "text/xml");
    }
    return xmlDom;
}

function  createXmlTree(el, xmlsrc, callback)  {

    var tree = new Ext.tree.TreePanel({
        el : el,
        animate : true,
        border : false,
        autoHeight : true,
        rootVisible : true
    });

    var xmlDom = loadXMLext(xmlsrc);
    try {
        tree.setRootNode(treeNodeFromXml(xmlDom.documentElement || xmlDom));
        callback.call(tree);
    } catch (e) {

        var p = new Ext.data.HttpProxy({
            url : xmlsrc
        });

        p.on("loadexception", function(o, response, e) {
            alert("loadException");
        });

        p.load(null, {
            read : function(response) {
                var doc = response.responseXML;
                tree.setRootNode(treeNodeFromXml(doc.documentElement || doc));
            }
        }, callback, tree);

    }
    return tree;
}

function  treeNodeFromXml(XmlEl)  {

    var t = ((XmlEl.nodeType == 3) ? XmlEl.nodeValue : XmlEl.tagName);
    if (t.replace(/\s/g, '').length == 0) {
        return null
    }
    var result = {
        text : t
    };

    if (XmlEl.nodeType == 1) {

        Ext.each(XmlEl.attributes, function(a) {
            if (a.nodeName == "href" && XmlEl.hasChildNodes())
                return;
            result[a.nodeName] = a.nodeValue;
        });

        result = new Ext.tree.TreeNode(result);
        Ext.each(XmlEl.childNodes, function(el) {
            if ((el.nodeType == 1) || (el.nodeType == 3)) {
                var c = treeNodeFromXml(el);
                if (c) {
                    result.appendChild(c);
                }
            }
        });
    }
    return result;
}

示例数据tree.json:

[ {
    text : 'json树根',
    url : 'root',
    menuid : 'root',
    expanded : true,
    children : [{
        text : 'json节点一',
        url : '001',
        menuid : '01',
        expanded : true
    }, {
        text : 'json节点二二',
        expanded : true,
        children : [{
            text : 'json节点三',
            url : '003',
            menuid : '03',
            expanded : true
        }, {
            text : 'json节点四',
            url : '004',
            menuid : '04',
            expanded : true
        }]
    }]
} ]

示例数据tree.xml:

< xml 树根 expanded ="true"  menuid ="10000"   >
   < xml 节点一 expanded ="true"  menuid ="10005"   />  
   < xml 节点二 expanded ="true"  menuid ="10007"    />  
</ xml树根 >