最近学习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>
分享到：
相关推荐
6. **代码实践**：`extTree.js` 文件很可能是实现 EXT Tree 的具体代码。在这个实践中，开发者可能定义了一个 TreePanel，并设置了相应的配置项，加载了数据，注册了事件处理器。通过阅读和分析这个文件，可以深入...
目录： ...详细见代码。 ...详细见代码。 ...即：Ext.window 4.mainPage.html为tab布局，右面为tree中间为tab页面。...5.tz-normal-test.html为普通拖拽的练习。...6.tree-asynch-test.html...8.tree-tz-test.html为tree节点拖拽的练习
3. 树形视图（Tree）：展示层次结构的数据，可进行扩展和折叠操作。 4. 工具栏（Toolbar）：用于放置按钮、菜单、分割线等，常与表格、面板等组件一起使用。 5. 面板（Panel）：容器组件，可以包含其他组件，有标题...
用户可以通过这个文档快速了解EXT JS的基本结构，如Grid面板、Form表单、Tree视图等，并学习如何创建和配置这些组件。同时，中文文档对于中国开发者来说是非常实用的，能够帮助他们更顺畅地理解和使用EXT JS。 ...
目录： ...详细见代码。 ...详细见代码。 ...即：Ext.window 4.mainPage.html为tab布局，右面为tree中间为tab页面。...5.tz-normal-test.html为普通拖拽的练习。...6.tree-asynch-test.html...8.tree-tz-test.html为tree节点拖拽的练习
- 实现拖放需要扩展`Ext.dd.DragSource`和`Ext.dd.DropTarget`。 9. **自定义节点模板** - 使用`tpl`配置项定义节点的HTML模板，或使用`renderer`函数动态渲染节点内容。 10. **API参考** ExtJS Tree API提供了...
可以把grid直接拖到tree，不同于其他的例子，拖动grid后会在tree中加一个叶子节点，大家试下就会明白。 自己练习用的哦，做的不好不要骂我，哪里不好希望大家包涵。 本人qq ：784027965 大家学习happy哈^_^
3. **Tree组件**：`Extjs tree的相关组件及属性 .doc`则关注ExtJS中的TreePanel，用于展示层次结构的数据。文档可能会介绍如何配置节点，添加拖放功能，以及如何通过API操作树结构。 4. **事件处理**：`事件处理EXT...
接下来，我们将详细分析ExtJS的组件体系，包括Grid面板、Tree面板、Form表单、TabPanel等。这些组件提供了丰富的功能，如数据排序、分页、过滤，以及灵活的布局和样式设置。理解这些组件的工作原理和配置选项，能...
深入浅出ExtJ附件代码每章的练习代码，共有十四章节 比如 tree form等等等
extjsweb教程是一本面向初学者的实践指南，旨在帮助读者快速掌握...本教程旨在通过实例和练习，帮助开发者掌握Ext JS框架的基础知识和进阶技巧，以便能够独立开发出功能强大、界面美观、响应快速的企业级Web应用程序。
ExtJS 是一个强大的JavaScript库，专门用于构建...实践是学习的关键，每个章节的文档都应该配合实际编码练习，以加深理解并提高技能。此外，了解和熟悉ExtJS的API文档也是十分必要的，因为它是解决具体问题的重要资源。
- **组件化**：组合使用ExtJs的各种组件（如Grid、Form、Tree等）来构建复杂的UI。 - **数据绑定**：使用Store与View的双向绑定，实现数据和界面的实时同步。 - **事件驱动**：通过监听和处理事件，实现组件间的...
5. **文件系统**：包括Linux下的各种文件系统类型，如ext2、ext3、ext4以及YAFFS等，以及如何在嵌入式设备上构建和使用文件系统。 6. **嵌入式Linux裁剪**：学习如何根据目标硬件的特性对Linux内核进行裁剪，以满足...
- **Tree Panel**：树形结构组件，适用于展示层级关系数据。 - **Button**：按钮组件，触发事件或动作的基本单元。 - **Checkbox**：复选框组件，用于实现多选功能。 - **Radio Button**：单选按钮组件，用于实现...
学习创建和管理适合嵌入式设备的文件系统，包括选择合适的文件系统类型（如ext2、ext3、ext4或YAFFS等），以及如何在闪存设备上优化文件系统性能。 6. **Bootloader**： Bootloader是启动嵌入式系统的第一个软件...
在实际工作中，"学员用kernel"可能是指一个供学习和实验用的内核镜像或源代码，它可能包含了适合初学者练习的简化配置和调试信息。通过学习和实践这些知识，开发者可以更好地理解和掌握在ARM平台上进行操作系统移植...
通过大量的编程练习，可以提高解决问题的能力。推荐使用像VC这样的编译器进行实践，甚至参与C语言竞赛来提升编程技巧。 嵌入式Linux主要分为两个方向：底层系统和应用开发。如果你的目标是应用开发，那么你需要深入...
本主题“ssd3exercise5”可能是一个关于Java编程的练习项目，其目标是让学生或开发者深入理解如何利用Java有效地与SSD进行交互，提高应用程序的运行效率。在“exercise5”这个具体任务中，可能会包括以下知识点： 1...