`
lorry1113
  • 浏览: 263210 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext tree练习

    博客分类：
  • js
EXTJavaScript框架HTMLIDEA 
阅读更多
最近学习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> 
分享到：
| 安装ArcGIS Server for Java
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    EXT Tree的简单实践

    6. **代码实践**：`extTree.js` 文件很可能是实现 EXT Tree 的具体代码。在这个实践中，开发者可能定义了一个 TreePanel，并设置了相应的配置项，加载了数据，注册了事件处理器。通过阅读和分析这个文件，可以深入...

    Ext例子及布局问题

    目录： ...详细见代码。 ...详细见代码。 ...即：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中文帮助文档（Ext常见界面源码，及类库方法详解）

    3. 树形视图（Tree）：展示层次结构的数据，可进行扩展和折叠操作。 4. 工具栏（Toolbar）：用于放置按钮、菜单、分割线等，常与表格、面板等组件一起使用。 5. 面板（Panel）：容器组件，可以包含其他组件，有标题...

    ext文档+资料集合

    用户可以通过这个文档快速了解EXT JS的基本结构，如Grid面板、Form表单、Tree视图等，并学习如何创建和配置这些组件。同时，中文文档对于中国开发者来说是非常实用的，能够帮助他们更顺畅地理解和使用EXT JS。 ...

    EXT 布局 tab布局 普通拖拽 异步加载的树 节点可以编辑的树

    目录： ...详细见代码。 ...详细见代码。 ...即：Ext.window 4.mainPage.html为tab布局，右面为tree中间为tab页面。...5.tz-normal-test.html为普通拖拽的练习。...6.tree-asynch-test.html...8.tree-tz-test.html为tree节点拖拽的练习

    extjs tree 学习资料

    - 实现拖放需要扩展`Ext.dd.DragSource`和`Ext.dd.DropTarget`。 9. **自定义节点模板** - 使用`tpl`配置项定义节点的HTML模板，或使用`renderer`函数动态渲染节点内容。 10. **API参考** ExtJS Tree API提供了...

    自己用ssh2 和 ext 做的简单oa

    可以把grid直接拖到tree，不同于其他的例子，拖动grid后会在tree中加一个叶子节点，大家试下就会明白。 自己练习用的哦，做的不好不要骂我，哪里不好希望大家包涵。 本人qq ：784027965 大家学习happy哈^_^

    Ext 资料snow

    3. **Tree组件**：`Extjs tree的相关组件及属性 .doc`则关注ExtJS中的TreePanel，用于展示层次结构的数据。文档可能会介绍如何配置节点，添加拖放功能，以及如何通过API操作树结构。 4. **事件处理**：`事件处理EXT...

    “深入浅出Ext“

    接下来，我们将详细分析ExtJS的组件体系，包括Grid面板、Tree面板、Form表单、TabPanel等。这些组件提供了丰富的功能，如数据排序、分页、过滤，以及灵活的布局和样式设置。理解这些组件的工作原理和配置选项，能...

    深入浅出ExtJ

    深入浅出ExtJ附件代码每章的练习代码，共有十四章节 比如 tree form等等等

    extjsweb教程

    extjsweb教程是一本面向初学者的实践指南，旨在帮助读者快速掌握...本教程旨在通过实例和练习，帮助开发者掌握Ext JS框架的基础知识和进阶技巧，以便能够独立开发出功能强大、界面美观、响应快速的企业级Web应用程序。

    ExtJS 教程

    ExtJS 是一个强大的JavaScript库，专门用于构建...实践是学习的关键，每个章节的文档都应该配合实际编码练习，以加深理解并提高技能。此外，了解和熟悉ExtJS的API文档也是十分必要的，因为它是解决具体问题的重要资源。

    ExtJs 2.2 简明教程 02 基础知识

    - **组件化**：组合使用ExtJs的各种组件（如Grid、Form、Tree等）来构建复杂的UI。 - **数据绑定**：使用Store与View的双向绑定，实现数据和界面的实时同步。 - **事件驱动**：通过监听和处理事件，实现组件间的...

    嵌入式linux培训班视频+13G

    5. **文件系统**：包括Linux下的各种文件系统类型，如ext2、ext3、ext4以及YAFFS等，以及如何在嵌入式设备上构建和使用文件系统。 6. **嵌入式Linux裁剪**：学习如何根据目标硬件的特性对Linux内核进行裁剪，以满足...

    EXTJS4.0视频教程

    - **Tree Panel**：树形结构组件，适用于展示层级关系数据。 - **Button**：按钮组件，触发事件或动作的基本单元。 - **Checkbox**：复选框组件，用于实现多选功能。 - **Radio Button**：单选按钮组件，用于实现...

    嵌入式Linux系统开发教程 教学资料.rar

    学习创建和管理适合嵌入式设备的文件系统，包括选择合适的文件系统类型（如ext2、ext3、ext4或YAFFS等），以及如何在闪存设备上优化文件系统性能。 6. **Bootloader**： Bootloader是启动嵌入式系统的第一个软件...

    arm板上的移植工具

    在实际工作中，"学员用kernel"可能是指一个供学习和实验用的内核镜像或源代码，它可能包含了适合初学者练习的简化配置和调试信息。通过学习和实践这些知识，开发者可以更好地理解和掌握在ARM平台上进行操作系统移植...

    嵌入式Linux

    通过大量的编程练习，可以提高解决问题的能力。推荐使用像VC这样的编译器进行实践，甚至参与C语言竞赛来提升编程技巧。 嵌入式Linux主要分为两个方向：底层系统和应用开发。如果你的目标是应用开发，那么你需要深入...

    ssd3exercise5

    本主题“ssd3exercise5”可能是一个关于Java编程的练习项目，其目标是让学生或开发者深入理解如何利用Java有效地与SSD进行交互，提高应用程序的运行效率。在“exercise5”这个具体任务中，可能会包括以下知识点： 1...

Magicbox
Global site tag (gtag.js) - Google Analytics