<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. css绘制图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. js自动检索输入文章长度

    1. 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. 获取ios设备系统信息的方法 之 [UIDevice currentDevice]

    获取iphone的系统信息使用[UIDevice currentDevice],信息如下: [[UIDevice currentDevice] systemName]:系统名称,如iPhone OS ...

  4. Linux 用户篇——用户管理命令之id、whoami、su、chage

    一.浅谈id.whoami.su.chage 本篇是续写上一篇<Linux 用户篇——用户管理命令之useradd.passwd.userdel.usermod>. (1)id命令 命令格 ...

  5. 【Mac】appium的环境搭建

    1.下载appium并安装,进入官网下载即可 http://appium.io 2.下载安装pip,因为pip执行命令的安装,会出现某些包的下载失败,因此使用brew进行 https://pypi.o ...

  6. day3 文件操作

    文件操作是在内存中进行操作的,因为文件是存储在内存中的. open函数,该函数用于文件处理: 操作文件时,一般需要经历如下步骤: (1)打开文件: (2)操作文件 一.打开文件 文件句柄 = open ...

  7. 解决 .net HttpClient 调用时出现的 "A task was cancelled" 错误

    近日在系统中集成ElasticClient客户端,自动创建索引.删除索引,发现通过 ElasticClient 的 LowerLevelClient 无法正确返回结果,但是索引已成功创建或删除. 并会 ...

  8. js正则获取url参数，包含hash[#]和search[?]两种通用

    function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  9. thinkphp5.0架构总览

    ThinkPHP5.0应用基于MVC(模型-视图-控制器)的方式来组织. MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC应用程序被分成三个核心部件:模型(M).视图(V) ...

  10. 记录一下最近犯得sb的翻车错误

    首先是: 数据范围是long long范围,然后写了一个暴力,觉得过不去,于是开了int范围,最后写了个能骗过所有数据的骗分,然后没开longlong... 接着是: for(int i = l; i ...