<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gbk">

        <title>tree</title>

        <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />

        <script type="text/javascript" src="Ext/ext-base.js"></script>

        <script type="text/javascript" src="Ext/ext-all.js"></script>

        <script type="text/javascript">

            Ext.onReady(function(){

                //树控件由Ext.tree.TreePanel类定义，控件名称为TreePanel，TreePanel类继承自Panel面板

                var tree = new Ext.tree.TreePanel({

                    el:'tree'//这里的参数‘tree’表示渲染的DOM的id

                });

                var root = new Ext.tree.TreeNode({text:'我是根'});

                //用setRootNode()方法把root放到tree里

                tree.setRootNode(root);

                //对tree进行渲染

                tree.render();

            });

        </script>

    </head>

    <body>

        <script type="text/javascript" src="Ext/examples/shared/examples.js"></script>

        <!-- 这里定义渲染的DIV，树将出现在这人DIV里 -->

        <div id="tree" style="height:300px;"></div>

    </body>

</html>
<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gbk">

        <title>tree</title>

        <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />

        <script type="text/javascript" src="Ext/ext-base.js"></script>

        <script type="text/javascript" src="Ext/ext-all.js"></script>

        <script type="text/javascript">

            Ext.onReady(function(){

                var tree = new Ext.tree.TreePanel({

                    el:'tree'

                });

                var root = new Ext.tree.TreeNode({text:'我是根'});

                var node1 = new Ext.tree.TreeNode({text:'我是根的第一个枝子'});

                var node2 = new Ext.tree.TreeNode({text:'我是根的第一个枝子的第一个叶子'});

                var node3 = new Ext.tree.TreeNode({text:'我是根的第一个叶子'});

                //使用appendChild()为一人结点添加子结点

                node1.appendChild(node2);

                root.appendChild(node1);

                root.appendChild(node3);

                tree.setRootNode(root);

                tree.render();

                //没有root.expand(true, true);就每次都要点击根或枝前面的加号才能展开整棵树。

                //root.expand(true, true);第一个参数表示是否递归展开所有子结点，如果为false，就只展开第一级子结点，下面的结点仍然是折叠状态。第二个参数表示是否要动画效果，如果为true可以明显看出这些结点是逐渐展开的。

                root.expand(true, true);

            });

        </script>

    </head>

    <body>

        <script type="text/javascript" src="Ext/examples/shared/examples.js"></script>

        <div id="tree" style="height:300px;"></div>

    </body>

</html>

Ext树形结构的更多相关文章

  1. Extjs实现树形结构三连选

    当项目中需要一个部门人员选择或者省市县地域连选时,就需要树形结构的连选. 再此,写了一个简单的树形结构三连选功能,模拟从后台读取数据和处理数据(欢迎大家交流指正). 代码如下: 循环创建三棵树,其中只 ...

  2. 树形结构JSON的实现方法

    在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项.目前市场上常见的JavaScript框架及组件库中均包含自己的树 ...

  3. js文章列表的树形结构输出

    文章表设计成这样了 后端直接给了无任何处理的json数据,现在要前端实现树形结构的输出,其实后端处理更简单写,不过既然来了就码出来 var doclist = [{ "id": 1 ...

  4. GridView 树形结构分组的功能

    在“会飞的鱼”博客中看到GridView实现树形结构的代码,经过修改,添加了树形结构中的复选框功能,欢迎吐槽. 源地址:http://www.cnblogs.com/chhuic/archive/20 ...

  5. [从产品角度学EXCEL 02]-EXCEL里的树形结构

    这是<从产品角度学EXCEL>系列第三篇. 前言请看: 0 为什么要关注EXCEL的本质 1 excel是怎样运作的 或者你可以去微信公众号@尾巴说数 获得连载目录. 本文仅由尾巴本人发布 ...

  6. C# EasyUI树形结构权限管理模块

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 本节和大家探讨下C#使用EasyUI树形结构/Tree构 ...

  7. YbSoftwareFactory 代码生成插件【十八】：树形结构下的查询排序的数据库设计

    树形结构的排序在中国特色下十分普遍也非常重要,例如常说的五大班子,党委>人大>政府>政协>纪委,每个班子下还有部门,岗位,人员,最终排列的顺序通常需要按权力大小.重要性等进行排 ...

  8. Java创建树形结构算法实例

    在JavaWeb的相关开发中经常会涉及到多级菜单的展示,为了方便菜单的管理需要使用数据库进行支持,本例采用相关算法讲数据库中的条形记录进行相关组装和排序讲菜单组装成树形结构. 首先是需要的JavaBe ...

  9. Atitit 常见的树形结构 红黑树  二叉树   B树 B+树  Trie树 attilax理解与总结

    Atitit 常见的树形结构 红黑树  二叉树   B树 B+树  Trie树 attilax理解与总结 1.1. 树形结构-- 一对多的关系1 1.2. 树的相关术语: 1 1.3. 常见的树形结构 ...

随机推荐

  1. 登陆记录utmp wtmp

    /var/log/wtmp文件的作用     /var/log/wtmp也是一个二进制文件,记录每个用户的登录次数和持续时间等信息.   查看方法:   可以用last命令输出当中内容: debian ...

  2. Delphi XE增强的RTTI妙用－－动态创建包中的窗口类

    以前要在运行时创建package中的form类,必须要在form单元文件中这样注册类: Initialization  RegisterClass(TForm3);Finalization  UnRe ...

  3. Linux下web服务的搭建

    1.安装Apache Apache的官网地址为:http://httpd.apache.org/,这里以源码的方式进行安装,我们下载的版本是“httpd-2.4.25.tar.gz”,下载后的压缩文件 ...

  4. JS循环、数组与练习题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Failed to lookup view 'error'

    这个问题在npm run dev进行本地开发时,没有问题.但是在npm run build后,生产服务器上部署时出现问题. 我对本地的路径排查,发现写的没有问题 所以我去了生产的文件夹看路径 我去了s ...

  6. MVC Partial页面的使用

    先建立Action: public PartialViewResult CurrentCount() { ViewBag.Count = CurrentUserCount; return Partia ...

  7. 什么是泛型 转载自http://www.blogjava.net/Jack2007/archive/2008/05/05/198566.html

    我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一个是处理string数据,或者其他自定义的数据类型,但我们没有办法,只能分别写多个方法处理每个数据类型,因为方法的参数类 ...

  8. ref:Struts2 命令执行系列回顾

    ref:http://www.zerokeeper.com/vul-analysis/struts2-command-execution-series-review.html Struts2 命令执行 ...

  9. ref:ubuntu下如何批量修改文件后缀名

    ref:https://blog.csdn.net/whuslei/article/details/6724900 ubuntu下如何批量修改文件后缀名 正确的方法是: 在命令行中输入   renam ...

  10. 2017 计蒜之道 初赛 第五场 D. UCloud 的安全秘钥（困难）

    小数据打表,大数据暴力. 导致超时的主要原因是$m$小的询问次数太多,可以把$m≤10$的答案直接暴力打表存起来,$m>10$的用$C$题的方法即可. #include <iostream ...