34.无废话ExtJs 入门教程十八[树：TreePanel]
转自：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]的更多相关文章
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十四[文本编辑器：Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
随机推荐
- TCP传输的三次握手四次挥手策略
为了准确无误地数据送达目标处,TCP协议采用了三次握手策略.用TCP协议把数据包送出去后,TCP不会对传送后的情况置之不理,它一定会向对方确认是否成功送达.握手中使用了TCP的标志:SYN和ACK 发 ...
- python +selenium的 里面还自带case 然后也有生成报告的模板
https://github.com/huahuijay/python-selenium2这个就是 python +selenium的 里面还自带case 然后也有生成报告的模板
- 添物不花钱学JavaEE（基础篇）－ Servlet
Servlet是Java Web开发必须要掌握的. Servlet是什么? A servlet is a Java technology based web component, managed by ...
- hdu 2642二维树状数组 单点更新区间查询 模板题
二维树状数组 单点更新区间查询 模板 从零开始借鉴http://www.2cto.com/kf/201307/227488.html #include<stdio.h> #include& ...
- 【NOIP2017】
NOIP2015 省Rank136 NOIP2016 省Rank165 NOIP2017 求进省Rank前100
- maven坐标查询
使用maven时,一个经常用到的操作就是去 中央仓库查询相关库的坐标,但在哪里查呢? 1 http://mvnrepository.com/ 服务器是由sonatype提供的,采用的是Nexus服务器 ...
- Linux下汇编语言学习笔记17 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- sonar做代码检测时如何忽略一些代码文件
1.管理员登录sonar 2.如图 一条规则配置一个,不要填写逗号或者分号分割的多个规则
- muduo buffer类的设计与使用
Unix/Linux上的五种IO模型(UNP6.2) IO多路复用一般不能和blocking IO用在一起,因为blocking IO中read() write() accept() connect( ...
- Sockets Tutorial
Sockets Tutorial This is a simple tutorial on using sockets for interprocess communication. The clie ...