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用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
随机推荐
- mysql-5.7.17-winx64免安装配置
一,下载mysql-5.7.17-winx64.zip 地址:https://dev.mysql.com/downloads/file/?id=467269 二,解压到自己的某个磁盘:data文件夹和 ...
- python后端开发工程师考证试题
python开发工程师考证试题 问答题链接 python开发工程师考证试题 选择题 题目 关于 Python 程序格式框架的描述,以下选项中错误的是 ( A ) A: Python 语言不采用严格的“ ...
- [luoguP1019] 单词接龙（DFS）
传送门 不知为什么,判断全部包含反而A不了,不判断反而A了,╮(╯▽╰)╭ 代码 #include <cstdio> #include <iostream> #define m ...
- 【区间DP+好题】String painter
https://www.bnuoj.com/v3/contest_show.php?cid=9149#problem/G [题意] 给定两个长度相同的字符串A,B.每次操作都能把A中的任意一个子段变成 ...
- msp430入门编程10
msp430中C语言操作端口I/O10 msp430中C语言的模块化头文件及实现11 msp430中C语言的模块化头文件及库文件12 msp430入门学习 msp430入门编程
- iLBC 压缩比
*---------------------------------------------------* * ...
- Avito Code Challenge 2018 C
C. Useful Decomposition time limit per test 1 second memory limit per test 256 megabytes input stand ...
- Codeforces 631D Messenger【KMP】
题意: 给定由字符串块(字符及连续出现的个数)组成的字符串t,s,求t串中有多少个s. 分析: KMP 这题唯一需要思考的地方就是如何处理字符串块.第一想到是把他们都展开然后进行KMP,可是展开后实在 ...
- Google Kaptcha验证码的使用
原文:http://www.kailing.pub/article/index/arcid/92.html Kaptcha是什么? kaptcha 是谷歌开源的非常实用的验证码生成工具,基于Simpl ...
- android_handler(二)
这篇记录 android 消息机制中.WorkThread 模拟向网络訪问数据,获得数据后,返回 message 发送给 MainThread ,并改动 TextView 的 text 的这种一个步骤 ...