<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. NGUI优化之Drawcall

    今天在运行之前的程序时,无意中发现一个简单的menu菜单页面drawcall居然达到接近30了,这个数值感觉太高了. 后网上查询关于降低drawcall的方法,发现主要有以下几点: 1.少用Panel ...

  2. 安装scrapy 出错 building 'twisted.test.raiser' extension error: Microsoft Visual C++ 14.0 is required.

    安装Scrapy出现错误: building 'twisted.test.raiser' extension error: Microsoft Visual C++ 14.0 is required. ...

  3. python爬取网易云音乐歌单音乐

    在网易云音乐中第一页歌单的url:http://music.163.com/#/discover/playlist/ 依次第二页:http://music.163.com/#/discover/pla ...

  4. Synergy，一个软件团队质量改进之路之一 --- 规划

    关于质量改进 ISO9001:2000的核心思想是持续改进 ISO关于质量管理有8项原则: 原则一: 以顾客为关注焦点 原则二: 领导作用 原则三: 全员参与 原则四: 过程方法 原则五:管理的系统方 ...

  5. 洛谷 P1184高手之在一起 题解

    题目传送门 那位高手是谁啊?@jxpxcsh  QWQ. 这道题数据特别水,所以直接使用O(n*m),每读进一个m内的字符串,就扫一遍n的字符串.但注意地点字符串中有可能会有空格,所以这时候就要请出g ...

  6. [MySQL] specified key was too long max key length is 767bytes

    https://blog.csdn.net/u012099869/article/details/53815084/

  7. css3 box-sizing属性值详解

    box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入widt ...

  8. 【LOJ】#2006. 「SCOI2015」小凸玩矩阵

    题解 又是美好的一天,我今天的小目标是LOJ刷题数名次前进两名(虽然巨佬们都是BZOJ千题啊这样的><,我就在LOJ划划水吧,我永远喜欢LOJ 这道题要求K大值最小,又是什么什么大值最小, ...

  9. STM32使用定时器实现输入捕获

    输入捕获简介输入捕获模式可以用来测量脉冲宽度或者测量频率.STM32的定时器,除了TIM6和TIM7,其他定时器都有输入捕获功能. STM32的输入捕获,简单地说就是通过检测TIMx_CHx上的边沿信 ...

  10. GeneXus手机开发基础配置

    最近使用GeneXus15 U3版本做了几个手机端的项目,感觉还不错,开发速度很快,而且想要的功能也都实现了.其中有一些常用的配置和小技巧和大家分享一下. 基础环境要求 如果想开发Android程序, ...