转自：https://www.cnblogs.com/iamlilinfeng/archive/2012/06/28/2566350.html

1.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <!--ExtJs框架开始-->

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

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

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

     <style type="text/css">

         .nodeicon

         {

             background-image: url(image/user.gif) !important;

         }

     </style>

     <!--ExtJs框架结束-->

     <script type="text/javascript">

         Ext.onReady(function () {

             //树的节点数据源

             var node = {

                 text: '根',

                 expanded: true,

                 leaf: false,

                 children: [

                     { text: '根下节点一[user图标]', leaf: true, iconCls: 'nodeicon' },

                     { text: '根下节点二', leaf: true },

                     { text: '根下节点三', leaf: false, children: [

                         { text: '节点三子节点一', leaf: true },

                         { text: '节点三子节点二', leaf: false, expanded: true, children: [

                             { text: '节点三子节点二节点一', leaf: true },

                             { text: '节点三子节点二节点二', leaf: true }

                         ]

                         }

                     ]

                     }

                 ]

             };

             //树面板(本地数据源)

             var treelocal = new Ext.tree.TreePanel({

                 title: 'TreePanelLocal',

                 //rootVisible: false,

                 root: node

             });

             //树面板(服务器数据源)

             var treeservice = new Ext.tree.TreePanel({

                 title: 'TreePanelService',

                 root: { text: '根', expanded: true },

                 //rootVisible: false,

                 loader: new Ext.tree.TreeLoader({

                     url: '/App_Ashx/Demo/Tree.ashx'

                 })

             });

             //单表

             var form = new Ext.form.FormPanel({

                 frame: true,

                 title: '表单标题',

                 style: 'margin:10px',

                 items: [treelocal, treeservice],

                 buttons: [{

                     text: '获取选中项',

                     handler: function () {

                         selectNode = treelocal.getSelectionModel().getSelectedNode();

                         alert('TreePanelLocal：' + (selectNode == null ? treelocal.root.text : selectNode.text));

                     }

                 }]

             });

             //窗体

             var win = new Ext.Window({

                 title: '窗口',

                 width: 476,

                 height: 574,

                 resizable: true,

                 modal: true,

                 closable: true,

                 maximizable: true,

                 minimizable: true,

                 items: form

             });

             win.show();

         });

     </script>

 </head>

 <body>

     <!--

 说明：

 (1)var tree = new Ext.tree.TreePanel():创建一个新的TreePanel表单对象。

 (2)root: node：根节点。

 (3)expanded: true:是否展开子节点，默认为false，如“根下节点三”。

 (4)leaf: true：是否为叶子节点，这个要注意下，如果设置为false但没有 children 那么会产生一直读取子节点的展示。

 (5)//rootVisible: false：有时候我们不想显示根节点，可以通过rootVisible设置他的可见性。在本例中我没有隐藏根。

 (6)loader: new Ext.tree.TreeLoader({

                     url: '/App_Ashx/Demo/Tree.ashx'

                 })

    树的数据载入组件，通过url寻找service端返回的json,并且自动转换成 TreeNode。

 (7)iconCls: 'nodeicon'：ExtJs自带的图标显示为“文件夹”或是“列表”，通过 iconCls 可以列换树型菜单的图标。

 (8)selectNode = treelocal.getSelectionModel().getSelectedNode()：获取选中项。

 -->

 </body>

 </html>

2.

用到后台代码如下/App_Ashx/Demo/Tree.ashx：

 using System.Web;

 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo

 {

     public class Tree : IHttpHandler

     {

         public void ProcessRequest(HttpContext context)

         {

             string strResult = @"[

                     { text: '根下节点一[user图标]', leaf: true, iconCls: 'nodeicon' },

                     { text: '根下节点二', leaf: true },

                     { text: '根下节点三', leaf: false, children: [

                         { text: '节点三子节点一', leaf: true },

                         { text: '节点三子节点二', leaf: false, expanded: true, children: [

                             { text: '节点三子节点二节点一', leaf: true },

                             { text: '节点三子节点二节点二', leaf: true }

                         ]

                         }

                     ]

                     }

                 ]";

             context.Response.Write(strResult);

         }

         public bool IsReusable

         {

             get

             {

                 return false;

             }

         }

     }

 }

2.效果如下：

34.无废话ExtJs 入门教程十八[树：TreePanel]的更多相关文章

  1. 无废话ExtJs 入门教程十六[页面布局：Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  2. 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]

    无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...

  3. 无废话ExtJs 入门教程十四[文本编辑器：Editor]

    无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...

  4. 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]

    无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...

  5. 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]

    无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...

  6. 无废话ExtJs 入门教程十九[API的使用]

    无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...

  7. 无废话ExtJs 入门教程二十[数据交互：AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  8. 无废话ExtJs 入门教程二十一[继承：Extend]

    无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...

  9. 无废话ExtJs 入门教程十七[列表：GridPanel]

    无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...

随机推荐

  1. UVa 11998 破碎的键盘（数组实现链表）

    题意: 输入一行字符,其中包含'[' 和 ‘]’, 意思为键盘上的home 和 end 键, 然后模拟字符在键盘上输入. 输入一行最终的结果 分析: 用数组模拟一个链表, 在链表的头尾插入字母然后输出 ...

  2. Huawei-R&S-网络工程师实验笔记20190615-IP基础（AR201上配置IP）

    >Huawei-R&S-网络工程师实验笔记20190615-IP基础(AR201上配置IP) >>实验开始,先上拓扑图参考: >>>一般正常配置IP操作如下 ...

  3. 04002_HTML表单

    1.表单标签 (1)表单标签:所有需要提交到服务器的表单项必须使用<form></form>括起来: (2)from标签属性 ①action:整个表单提交的位置,可以是一个页面 ...

  4. Web框架django基础篇

    基本配置及学习  路由(Urls).视图(Views).模板(Template).Model(ORM). 简介 Django 是一个由 Python 写成的开放源代码的 Web 应用框架.它最初是被开 ...

  5. MySQL workbench8.0 CE基本用法(创建数据库、创建表、创建用户、设置用户权限、创建SQL语句脚本）

    原文地址:https://blog.csdn.net/zgcr654321/article/details/82156277 安装完成MySQL后,打开MySQL workbench8.0. 可以看到 ...

  6. React Native学习（十）—— 生命周期

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

  7. Ubuntu 16.04下Redis Cluster集群搭建（官方原始方案）

    前提:先安装好Redis,参考:http://www.cnblogs.com/EasonJim/p/7599941.html 说明:Redis Cluster集群模式可以做到动态增加节点和下线节点,使 ...

  8. Ubuntu 16.04安装***-qt5

    上一篇文章http://www.cnblogs.com/EasonJim/p/7133097.html中,第5步安装本地代理源服务器使用的是electron-ssr,发觉这个东西难配且难用,非常不建议 ...

  9. Java高级教程：Java并发性和多线程

    Java并发性和多线程: (中文,属于人工翻译,高质量):http://ifeve.com/java-concurrency-thread-directory/ (英文):http://tutoria ...

  10. python: filter, map, reduce, lambda

    filter built-in function filter(f,sequence) filter can apply the function f to each element of seque ...