ExtJS中TreePanel的使用-优快云博客

本文介绍如何使用ExtJS的TreePanel结合XMLTreeLoader组件从XML文件中动态加载树形结构数据。通过实例演示了如何配置TreePanel、定义加载器及处理节点加载事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天帮朋友用ExtJS的TreePanel做了个小demo,实现从动态异步从后台加载并构建节点（为了方便演示，这里使用本地的XML文件进行模拟）。网上的资料大多是使用JSON格式的数据进行讲解的，相比起来，JSON格式确实要简单一些。

首先看看效果：

下面开始来一步步做下去，首先是页面文件index.html, 这里有两个地方要注意一下，一个是我们引用的JS如果采用GBK的默认编码，浏览器会显示未结束的字符串常量的错误，所以我们一般会修改JS文件的编码方式为UTF-8，或者在导入JS时加上编码字符集。

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>XmlTreeLoaderExample</title>
<linkrel="stylesheet"type="text/css"href="http://www.cnblogs.com/resources/css/ext-all.css"/>
<scripttype="text/javascript"src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="http://www.cnblogs.com/ext-all.js"></script>
<scripttype="text/javascript"src="../ux/XmlTreeLoader.js"></script>
<scripttype="text/javascript"src="xml-tree-loader.js"charset="gbk"></script></head>
<body>
<divid="tree"></div>
</body>
</html>

然后是我们的主JS文件xml-tree-loader.js，为了模拟从后台服务器端动态加载指定节点的所有孩子节点，在这里为'beforeload'事件指派了一个事件处理者，它会根据当前待加载节点的id号，去取不同的xml文件

//
//ExtendtheXmlTreeLoadertosetsomecustomTreeNodeattributesspecifictoourapplication:
//
Ext.app.MyXMLLoader=Ext.extend(Ext.ux.tree.XmlTreeLoader,{
processAttributes:function(attr)
{
attr.text=attr.name;
attr.leaf=false;
}
});

Ext.onReady(function()
{
vartreeloader=newExt.app.MyXMLLoader({
//dataUrl:'tree.jsp'//这里可以不需要指定URL，在beforeload事件响应里面设置
});
vartree=newExt.tree.TreePanel({
el:'tree',
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll:true,
border:false,
loader:treeloader

});
varrootID='0';
varrootnode=newExt.tree.AsyncTreeNode({
id:rootID,
text:'root',
draggable:false,//根节点不容许拖动
expanded:false
});

//为tree设置根节点
tree.setRootNode(rootnode);
tree.on('click',function(node,event)
{
alert(node.id);
});
tree.on('beforeload',function(node)
{
tree.loader.dataUrl='data'+node.id+'.xml';//定义每个节点的Loader
});
//renderthetree
tree.render();
});

下面分别是模拟的xml数据文件data0.xml,data1.xml,data2.xml，用来模拟根据节点id号从服务器端取到的XML数据。

<Pictures>
<Picturename="node1"id="1"/>
<Picturename="node2"id="2"/>
</Pictures>

data1.xml

data2.xml

<Pictures>
<Picturename="node2_1"id="2_1"/>
<Picturename="node2_2"id="2_2"/>
<Picturename="node2_3"id="2_3"/>
<Picturename="node2_4"id="2_4"/>
</Pictures>