在ExtJS中，不管是叶子节点还是非叶子节点，都统一用TreeNode表示树的节点。在ExtJS中，有两种类型的树节点。一种节点是普通的简单树 节点，由Ext.tree.TreeNode定义，另外一种是需要异步加载子节点信息的树节点，该类由Ext.tree.AsyncTreeNode定 义。
在数据中， text 显示文字， leaf 节点 ， children 子节点，expanded 展开

1. var store = Ext.create(‘Ext.data.TreeStore', {
   
2. root: {
   
3. expanded: true,
   
4. children: [
   
5. { text: “留学”, leaf: true },
   
6. { text: “功课”, expanded: true, children: [
   
7. { text: “英语”, leaf: true },
   
8. { text: “代数”, leaf: true}
   
9. ] },
   
10. { text: “托福”, leaf: true }
    
11. ]
    
12. }
    
13. });

复制代码

TreePanel从servlet中读取JSON数据
在Ext JS的Tree中的数据往往是从服务器端的动态程序中获取的。
为了获取数据，我们可以先编写一个返回JSON的Servlet共前台的树形组建访问：
服务器端servlet代码：

1. import java.io.IOException;
   
2. 
   
3. import java.io.PrintWriter;
   
4. 
   
5. import javax.servlet.http.HttpServletRequest;
   
6. 
   
7. import javax.servlet.http.HttpServletResponse;
   
8. 
   
9. import javax.servlet.ServletException;
   
10. 
    
11. import javax.servlet.http.HttpServlet;
    
12. 
    
13. public class TreeNodeServlet extends HttpServlet {
    
14. 
    
15. protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
16. 
    
17. response.setContentType("text/html;charset=utf-8");
    
18. 
    
19. //这里的node是前台的AsyncTreeNode组建中设置的ID，见下面的JS程序
    
20. 
    
21. String treeNode = request.getParameter("node");
    
22. 
    
23. String json = "";
    
24. 
    
25. PrintWriter out = response.getWriter();
    
26. 
    
27. if("0".equals(treeNode)) {
    
28. 
    
29. json+="[{id:1,text:'0-1'},{id:2,text:'0-2'}]";
    
30. 
    
31. }
    
32. 
    
33. else if("1".equals(treeNode)) {
    
34. 
    
35. json+="[{id:11,text:'0-1-1',leaf:true},{id:12,text:'0-1-2',leaf:true}]";
    
36. 
    
37. }
    
38. 
    
39. else if("2".equals(treeNode)) {
    
40. 
    
41. json+="[{id:21,text:'0-2-1'},{id:22,text:'0-2-2',leaf:true}]";
    
42. 
    
43. }
    
44. 
    
45. else if("21".equals(treeNode)) {
    
46. 
    
47. json+="[{id:211,text:'0-2-1-1',leaf:true},{id:212,text:'0-2-1-2',leaf:true}]";
    
48. 
    
49. }
    
50. 
    
51. out.write(json);
    
52. 
    
53. }
    
54. 
    
55. }

复制代码

现在就可以在前台的TreePanel组建的loader方法中访问上面创建的servlet了，代码如下：
客户端显示代码

1. Ext.onReady(function(){
   
2. 
   
3. var tree = new Ext.tree.TreePanel({
   
4. 
   
5. //这里的div-tree是在html中创建的一个对象的id值
   
6. 
   
7. el: 'div-tree',
   
8. 
   
9. //使用loader方法访问TreeNodeServlet
   
10. 
    
11. loader: new Ext.tree.TreeLoader({dataUrl:'../TreeNodeServlet'})
    
12. 
    
13. });
    
14. 
    
15. var root = new Ext.tree.AsyncTreeNode({id:'0',text:'0'})
    
16. 
    
17. tree.setRootNode(root);
    
18. 
    
19. tree.render();
    
20. 
    
21. root.expand();
    
22. 
    
23. });

复制代码

效果图如下：

在树TreePanel之间拖放结点
有时候我们在程序中，需要把一棵TreePanel的元素拖放到另外一棵TreePanel中，如果是在同一棵树中拖动时设置组件的enableDD参数为true，而现在需要在不同给的书之间拖动元素，这个时候就可以设置组件的enableDrag和enableDrop参数，详细示例如下：
1.编写JS代码：
JS代码

1. Ext.onReady(function(){
   
2. 
   
3.   var tree1 = new Ext.tree.TreePanel({
   
4.     el: 'tree1',
   
5. //这里设置enableDrag为true表示可以从这里拖动元素到别处
   
6.     enableDrag:true,
   
7.     loader: new Ext.tree.TreeLoader({dataUrl: 'treeData1.txt'})
   
8.   });
   
9.   var tree2 = new Ext.tree.TreePanel({
   
10.     el: 'tree2',
    
11. //这里设置enableDrop为true表示可以在这棵树中放置拖动过来的元素
    
12.     enableDrop:true,
    
13.     loader: new Ext.tree.TreeLoader({dataUrl: 'treeData2.txt'})
    
14.   });
    
15.   var root1 = new Ext.tree.AsyncTreeNode({text:'跟节点'});
    
16.   var root2 = new Ext.tree.AsyncTreeNode({text:'图书'});
    
17.   tree1.setRootNode(root1);
    
18.   tree2.setRootNode(root2);
    
19.   tree1.render();
    
20.   tree2.render();
    
21. 
    
22. });

复制代码

2.HTML代码如下：
HTML代码

1. <div id="tree1"></div>
   
2. <div id="tree2"></div>

复制代码

3.编写两个TreeLoader需要装载的txt文件，里面的数据为JSON格式：
treeData1.txt:

1. [
   
2.     {text:'非叶子结点'},
   
3.     {text:'叶子结点',leaf:true}
   
4. ]
   
5. treeData2.txt:
   
6. 
   
7. [
   
8.   {text:'计算机',children:[
   
9.     {text:'Java',children:[
   
10.       {text:'Java核心技术',leaf:true},
    
11.       {text:'Thinking in Java',leaf:true}
    
12.     ]},
    
13.     {text:'算法导论',leaf:true}
    
14.   ]},
    
15.   {text:'音乐',children:[
    
16.     {text:'乐理基础',leaf:true},
    
17.     {text:'卡尔卡西古典吉他教程',leaf:true}
    
18.     ]}
    
19. ]

复制代码

4.程序效果如下图所示：

来源：互联网
免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！