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用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
随机推荐
- DFS求连通块（漫水填充法）
G - DFS(floodfill),推荐 Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I6 ...
- cadence中元件所在库
DISCRETE(分立元件)中 开关: 其中可供选择的这几个比较好 SW PUSHBUTTON SW PUSHBUTTON-DPST 数码管: LDD(开头) LTD(开头) 版权声明:本文为博主原创 ...
- sql server 数据库 杀掉死锁进程
use mastergo--检索死锁进程select spid, blocked, loginame, last_batch, status, cmd, hostname, program_namef ...
- 【Codeforces 1117C】Magic Ship
[链接] 我是链接,点我呀:) [题意] 题意 [题解] 我们可以把这个行船的过程分解成两个过程 1.船经过时间t被风吹到了某个地方 2.船用这t时间尝试到达终点(x2,y2) 会发现如果时间t能最终 ...
- Spring Boot Jpa 表名小写转大写
今天在使用SpringBoot整合Hibernate后创建表,表名为小写,而在linux下,mysql的表名是区分大小写的,因此在我的数据表中,就出现了两个一样的表 act_id_user 和 AC ...
- 「CodePlus 2017 12 月赛」火锅盛宴
n<=100000种食物,给每个食物煮熟时间,有q<=500000个操作:在某时刻插入某个食物:查询熟食中编号最小的并删除之:查询是否有编号为id的食物,如果有查询是否有编号为id的熟食, ...
- 【IntelliJ】IntelliJ IDEA常用设置及快捷键以及自定义Live templates
IntelliJ IDEA是一款非常优秀的JAVA编辑器,初学都可会对其中的一些做法感到很别扭,刚开始用的时候我也感到很不习惯,在参考了网上一些文章后在这里把我的一些经验写出来,希望初学者能快速适应它 ...
- 【Tomcat】tomcat启动后查看运行时JVM参数
Tomcat优化配置参考http://www.cnblogs.com/qlqwjy/p/8007490.html 1.启动服务后访问localhost,点击Server Status
- msp430入门编程01
msp430单片机最小系统 msp430入门学习 msp430入门编程
- zoj——3195 Design the city
Design the city Time Limit: 1 Second Memory Limit: 32768 KB Cerror is the mayor of city HangZho ...