转自：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. Borrowers

    Description I mean your borrowers of books - those mutilators of collections, spoilers of the symmet ...

  2. Windows和Linux启动虚拟环境

    快速跳转到Linux操作 Windows启动虚拟环境 <!--tab回车可以补全--> 安装virtualenv pip install virtualenv 创建虚拟环境 方法一: py ...

  3. STM32F407 GPIO 库函数编程套路（led与beep总结） 个人笔记

    本文由正点原子STM32F407探索者开发板的led和beep实验,总结了gpio编程的套路. 下文中以hardware 来称呼可能的硬件外设,如led或beep等. 新建项目后主要用到三个文件:ha ...

  4. HDU 2815 扩展baby step giant step 算法

    题目大意就是求 a^x = b(mod c) 中的x 用一般的baby step giant step 算法会超时 这里参考的是http://hi.baidu.com/aekdycoin/item/2 ...

  5. HDU 2647 逆向拓扑排序

    令每一个员工都有一个自己的等级level[i] , 员工等级越高,那么工资越高,为了使发的钱尽可能少,所以每一级只增加一单位的钱 输入a b表示a等级高于b,那么我们反向添加边,令b—>a那么i ...

  6. MyChrome制作Chrome浏览器便携版

    Google Chrome官方离线下载地址: https://api.shuax.com/tools/getchrome MyChrome下载地址: http://code.taobao.org/p/ ...

  7. 深入理解windows系统内的GMT和时区

    http://www.itshanghai.net/technology/wdzl_windowsxp/   UTC(Universal Time Coordinated)是通用协调时,这两者几乎是一 ...

  8. 如何查看sqlalchemy执行的原始sql语句？

    SQLAlchemy打开SQL语句方法如下,echo=true将开启该功能: engine = create_engine("<db_rul>", echo=True) ...

  9. 基于Wi-Fi的HID注射器，利用WHID攻击实验

    WHID代表基于 Wi-Fi 的 HID 注射器,即对 HID 攻击进行无线化攻击的一种注入工具. 实验攻击原理如下图: 攻击者使用ESP8266作为AP,在自己的电脑创建客户端连接AP.在客户端键入 ...

  10. C#.NET 如何快速输入一个对象事件对应的方法

    直接在Textbox图像对象中找到这个对象的KeyPress方法,然后输入触发的事件名称.效率更高,不容易出错. "void TypeAreaKeyPress(object sender, ...