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

首先看看效果:

 

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

  1. <html> 
  2. <head> 
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  4.     <title>XmlTreeLoader Example</title> 
  5.     <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" /> 
  6.      <script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script> 
  7.     <script type="text/javascript" src="http://www.cnblogs.com/ext-all.js"></script> 
  8.     <script type="text/javascript" src="../ux/XmlTreeLoader.js"></script> 
  9.        <script type="text/javascript" src="xml-tree-loader.js" charset="gbk"></script></head> 
  10. <body> 
  11.     <div id="tree"></div> 
  12. </body> 
  13. </html> 

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

  1. //  
  2. // Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:  
  3. //  
  4. ExtExt.app.MyXMLLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {  
  5.     processAttributes : function(attr)  
  6.     {  
  7.         attrattr.text = attr.name;  
  8.         attr.leaf = false;  
  9.     }  
  10. });  
  11.  
  12. Ext.onReady(function()  
  13. {  
  14.     var treeloader = new Ext.app.MyXMLLoader({  
  15.             // dataUrl : 'tree.jsp'//这里可以不需要指定URL,在beforeload事件响应里面设置  
  16.      });  
  17.      var tree = new Ext.tree.TreePanel({  
  18.         el: 'tree',  
  19.         useArrows: true,  
  20.         autoScroll: true,  
  21.         animate: true,  
  22.         enableDD: true,  
  23.         containerScroll: true,  
  24.         border: false,  
  25.         loader: treeloader  
  26.  
  27.     });  
  28.     var rootID = '0';  
  29.     var rootnode = new Ext.tree.AsyncTreeNode({  
  30.         id : rootID,  
  31.         text : 'root',  
  32.         draggable : false,// 根节点不容许拖动  
  33.         expanded : false  
  34.     });  
  35.  
  36.     // 为tree设置根节点  
  37.     tree.setRootNode(rootnode);  
  38.     tree.on('click',function(node,event)  
  39.     {  
  40.         alert(node.id);  
  41.     });  
  42.     tree.on('beforeload', function(node)   
  43.     {  
  44.         tree.loader.dataUrl = 'data' + node.id + '.xml'; // 定义每个节点的Loader  
  45.     });  
  46.     // render the tree  
  47.     tree.render();  
  48. }); 

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

  1. <Pictures> 
  2.   <Picture name="node1" id="1" />   
  3.   <Picture name="node2" id="2" />   
  4. </Pictures> 

data1.xml

  1. <Pictures> 
  2.   <Picture name="node1_1" id="1_1" />   
  3.   <Picture name="node1_2" id="1_2" />   
  4.   <Picture name="node1_3" id="1_3" />   
  5.   <Picture name="node1_4" id="1_4" />   
  6. </Pictures> 

data2.xml

  1. <Pictures> 
  2.   <Picture name="node2_1" id="2_1" />   
  3.   <Picture name="node2_2" id="2_2" />   
  4.   <Picture name="node2_3" id="2_3" />   
  5.   <Picture name="node2_4" id="2_4" />   
  6. </Pictures>