ext tree练习
最近学习extjs发现了一个问题，extjs是一个JavaScript的框架，属于前端页面上的，所有完全可以和后天的语言分离，大家在extjs的官方例子中可以看到都是html的格式。也就是说和后台结合的话也是按照某种方式传输数据，干什么又加上各种语言的各种框架。简单问题复杂化。
现在通过例子说明一下。
Java 代码
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4. <title>Virgo_S</title>
5. <link rel="stylesheet" type="text/css" href="extjs/ext-all.css"/>
6. <script type="text/javascript" src="extjs/ext-base.js"></script>
7. <script type="text/javascript" src="extjs/ext-all.js"></script>
8. <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
9. <script type="text/javascript">
10. Ext.onReady(function() {
11. var Tree = Ext.tree;
12.
13. //定义根节点的Loader
14. var treeloader=new Tree.TreeLoader({
15. dataUrl:'TreeServlet' //指定的URL
16. });
17.
18. //异步加载根节点
19. var rootnode=new Tree.AsyncTreeNode({
20. id:'1',
21. text:'目录树根节点'
22. });
23.
24. var treepanel = new Tree.TreePanel({
25. //renderTo:"tree_div",
26. //如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
27. el:'tree', // 填充区域
28. rootVisible:true, //隐藏根节点
29. border:true, //边框
30. animate:true, // 动画效果
31. autoScroll:true, // 自动滚动
32. enableDD:false, // 节点是否可以拖拽
33. containerScroll:true,
34. //root:rotnode, //两种设置root节点的方法，
35. //一种配置root，另一种就是setRootNode
36. loader:treeloader
37. });
38.
39. //设置根节点
40. //treepanel.setRootNode(rootnode);
41.
42. //响应事件，传递node参数
43.
44. treepanel.render();
45. rootnode.expand(false,false);
46.
47. });
48.
49. </script>
50. </head>
51. <body>
52. <div id="tree" style="height:500px;width:500px;"></div>
53. </body>
54. </html>
这里说明几点问题：
1.treepanel在render（渲染，呈现）之前一定要有root（根）节点。可以通过配置root属性和setRootNode方法来实现。
2.loader配置选项需要一个Ext.tree.TreeLoader的对象。
3.treeloader是通过一种懒方式，从指定的url加载treenode的子节点。这里要注意的地方就是，结合第一，二条，一定要有 root节点，loader配置的treeloader对象加载的是treenode的子节点，所以一定要设置一个root节点
4.就是响应返回的是一个JavaScript数组，例如
Java 代码
1. [{
2. id: 1,
3. text: 'A leaf Node',
4. leaf: true
5. },{
6. id: 2,
7. text: 'A folder Node',
8. children: [{
9. id: 3,
10. text: 'A child Node',
11. leaf: true
12. }]
13. }]
我的后台是用Java写的一个servlet：
Java 代码
1. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
2.
3. String str = "[{'cls':'folder','id':10,'leaf':false,'children':[{'cls':'file','id':11,'leaf':true,'children':null,'text':'S600'},{'cls':'file','id':12,'leaf':true,'children':null,'text':'SLK200'}],'text':'Benz'}]";
4.
5.
6. response.getWriter().write(str.toString());
7.
静态树
Java 代码
1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3. <html>
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6. <title>Virgo_S</title>
7. <link rel="stylesheet" type="text/css" href="extjs/ext-all.css" />
8. <script type="text/javascript" src="extjs/ext-base.js"></script>
9. <script type="text/javascript" src="extjs/ext-all.js"></script>
10. <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
11. <script type="text/javascript">
12. Ext.onReady(function(){
13. //定义树的跟节点
14. var root=new Ext.tree.TreeNode({
15. id:"root",//根节点 id
16. text:"我是树根"
17. });
18.
19. //定义树节点
20. var c1=new Ext.tree.TreeNode({
21. id:'c1',//子结点id
22. text:'大儿子'
23. });
24. var c2=new Ext.tree.TreeNode({
25. id:'c2',
26. text:'小儿子'
27. });
28. var c22=new Ext.tree.TreeNode({
29. id:'c22',
30. text:'大孙子'
31. });
32.
33. root.appendChild(c1);//为根节点增加子结点c1
34. root.appendChild(c2);//为c1增加子节点c2，相信你已经找到规律了吧^_^
35. c1.appendChild(c22);//为c1增加子节点c22
36.
37. //生成树形面板
38. var tree=new Ext.tree.TreePanel({
39. renderTo:"tree",
40. root:root,//定位到根节点
41. animate:true,//开启动画效果
42. enableDD:false,//不允许子节点拖动
43. border:false,//没有边框
44. rootVisible:false//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
45. });
46.
47. });
48. </script>
49. </head>
50. <body>
51. <div id="tree" style="height: 500px; width: 500px;"></div>
52. </body>
53. </html>
现在通过例子说明一下。
Java 代码
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4. <title>Virgo_S</title>
5. <link rel="stylesheet" type="text/css" href="extjs/ext-all.css"/>
6. <script type="text/javascript" src="extjs/ext-base.js"></script>
7. <script type="text/javascript" src="extjs/ext-all.js"></script>
8. <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
9. <script type="text/javascript">
10. Ext.onReady(function() {
11. var Tree = Ext.tree;
12.
13. //定义根节点的Loader
14. var treeloader=new Tree.TreeLoader({
15. dataUrl:'TreeServlet' //指定的URL
16. });
17.
18. //异步加载根节点
19. var rootnode=new Tree.AsyncTreeNode({
20. id:'1',
21. text:'目录树根节点'
22. });
23.
24. var treepanel = new Tree.TreePanel({
25. //renderTo:"tree_div",
26. //如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
27. el:'tree', // 填充区域
28. rootVisible:true, //隐藏根节点
29. border:true, //边框
30. animate:true, // 动画效果
31. autoScroll:true, // 自动滚动
32. enableDD:false, // 节点是否可以拖拽
33. containerScroll:true,
34. //root:rotnode, //两种设置root节点的方法，
35. //一种配置root，另一种就是setRootNode
36. loader:treeloader
37. });
38.
39. //设置根节点
40. //treepanel.setRootNode(rootnode);
41.
42. //响应事件，传递node参数
43.
44. treepanel.render();
45. rootnode.expand(false,false);
46.
47. });
48.
49. </script>
50. </head>
51. <body>
52. <div id="tree" style="height:500px;width:500px;"></div>
53. </body>
54. </html>
这里说明几点问题：
1.treepanel在render（渲染，呈现）之前一定要有root（根）节点。可以通过配置root属性和setRootNode方法来实现。
2.loader配置选项需要一个Ext.tree.TreeLoader的对象。
3.treeloader是通过一种懒方式，从指定的url加载treenode的子节点。这里要注意的地方就是，结合第一，二条，一定要有 root节点，loader配置的treeloader对象加载的是treenode的子节点，所以一定要设置一个root节点
4.就是响应返回的是一个JavaScript数组，例如
Java 代码
1. [{
2. id: 1,
3. text: 'A leaf Node',
4. leaf: true
5. },{
6. id: 2,
7. text: 'A folder Node',
8. children: [{
9. id: 3,
10. text: 'A child Node',
11. leaf: true
12. }]
13. }]
我的后台是用Java写的一个servlet：
Java 代码
1. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
2.
3. String str = "[{'cls':'folder','id':10,'leaf':false,'children':[{'cls':'file','id':11,'leaf':true,'children':null,'text':'S600'},{'cls':'file','id':12,'leaf':true,'children':null,'text':'SLK200'}],'text':'Benz'}]";
4.
5.
6. response.getWriter().write(str.toString());
7.
静态树
Java 代码
1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3. <html>
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6. <title>Virgo_S</title>
7. <link rel="stylesheet" type="text/css" href="extjs/ext-all.css" />
8. <script type="text/javascript" src="extjs/ext-base.js"></script>
9. <script type="text/javascript" src="extjs/ext-all.js"></script>
10. <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
11. <script type="text/javascript">
12. Ext.onReady(function(){
13. //定义树的跟节点
14. var root=new Ext.tree.TreeNode({
15. id:"root",//根节点 id
16. text:"我是树根"
17. });
18.
19. //定义树节点
20. var c1=new Ext.tree.TreeNode({
21. id:'c1',//子结点id
22. text:'大儿子'
23. });
24. var c2=new Ext.tree.TreeNode({
25. id:'c2',
26. text:'小儿子'
27. });
28. var c22=new Ext.tree.TreeNode({
29. id:'c22',
30. text:'大孙子'
31. });
32.
33. root.appendChild(c1);//为根节点增加子结点c1
34. root.appendChild(c2);//为c1增加子节点c2，相信你已经找到规律了吧^_^
35. c1.appendChild(c22);//为c1增加子节点c22
36.
37. //生成树形面板
38. var tree=new Ext.tree.TreePanel({
39. renderTo:"tree",
40. root:root,//定位到根节点
41. animate:true,//开启动画效果
42. enableDD:false,//不允许子节点拖动
43. border:false,//没有边框
44. rootVisible:false//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
45. });
46.
47. });
48. </script>
49. </head>
50. <body>
51. <div id="tree" style="height: 500px; width: 500px;"></div>
52. </body>
53. </html>