TreePanel是继承自Panel,所以很多在Panel中谈到的属性这里可能会一笔带过,如有问题,请参考ExtJs2.0学习系列(2)--Ext.Panel第一个静态树--最简单的树
html代码:
1.
<div id="container"></div>
js代码:
Ext.onReady(function(){
var mytree=new Ext.tree.TreePanel({
el:"container",//应用到的html元素id
animate:true,//以动画形式伸展,收缩子节点
title:"Extjs静态树",
collapsible:true,
rootVisible:true,//是否显示根节点
autoScroll:true,
autoHeight:true,
width:150,
lines:true,//节点之间连接的横竖线
loader:new Ext.tree.TreeLoader(),//
root:new Ext.tree.AsyncTreeNode({
id:"root",
text:"根节点",//节点名称
expanded:true,//展开
leaf:false,//是否为叶子节点
children:[{text:'子节点一',leaf:true},{id:'child2',text:'子节点二',children:[{text:"111"}]}]
})
});
mytree.render();//不要忘记render()下,不然不显示哦
})
在这里,我谈一个问题:
/*只有loader和AsyncTreeNode才能使children显示出来,为什么?*/
我在api中没有找到答案,甚至连children都没有看到,但是在原代码中,我们可以确定这个事实,只有loader实例后, AsyncTreeNode的children才会被递归的添加(appendChild)到它的父节点下,所以象示例中的代码,一定要注意条件.
其他的子节点问题不受此限制!
TreePanel基本配置参数:
//TreePanel配置参数
1.animate:true//展开,收缩动画,false时,则没有动画效果
2.autoHeight:true//自动高度,默认为false
3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
4.enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
5.enableDrop:true//仅仅drop
6.lines:true//节点间的虚线条
7.loader:Ext.tree.TreeLoader//加载节点数据
8.root:Ext.tree.TreeNode//根节点
9.rootVisible:false//false不显示根节点,默认为true
10.trackMouseOver:false//false则mouseover无效果
11.useArrows:true//小箭头
2.通过TreeNode自定义静态树
例子1其实很受数据的限制，必须先要准备好数组对象，我们用另外的方式再写个例子，在写例子前，我们来学习下
TreeNode的基本配置参数:
//TreeNode常用配置参数
1.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
2.expanded:fasle//展开,默认不展开
3.href:"http:/www.cnblogs.com"//节点的链接地址
4.hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
5.leaf:true//叶子节点,看情况设置
6.qtip:"提示"//提示信息,不过要 Ext.QuickTips.init();下
7.text:"节点文本"//节点文本
8.singleClickExpand:true//用单击文本展开,默认为双击
效果图:
html代码:
<body style="margin:10px;">
<div id="container">
</div>
<iframe name="mainFrame" id="mainFrame" height="100px" width="200px" src="jstest.htm"></iframe>
</body>
js代码:
Ext.onReady(function(){
Ext.QuickTips.init();
var mytree=new Ext.tree.TreePanel({
el:"container",
animate:true,
title:"Extjs静态树",
collapsible:true,
enableDD:true,
enableDrag:true,
rootVisible:true,
autoScroll:true,
autoHeight:true,
width:150,
lines:true
});
//根节点
var root=new Ext.tree.TreeNode({
id:"root",
text:"控制面板",
expanded:true
});
//第一个子节点及其子节点
var sub1=new Ext.tree.TreeNode({
id:"news",
text:"新闻管理",
singleClickExpand:true
});
sub1.appendChild(new Ext.tree.TreeNode({
id:"addNews",
text:"添加新闻",
href:"http://www.baidu.com",
hrefTarget:"mainFrame",
qtip:"打开百度",
listeners:{//监听
"click":function(node,e){
alert(node.text)
}
}
}));
sub1.appendChild(new Ext.tree.TreeNode({
id:"editNews",
text:"编辑新闻"
}));
sub1.appendChild(new Ext.tree.TreeNode({
id:"delNews",
text:"删除新闻"
}));
root.appendChild(sub1);
root.appendChild(new Ext.tree.TreeNode({
id:"sys",
text:"系统设置"
}));
mytree.setRootNode(root);//设置根节点
mytree.render();//不要忘记render()下,不然不显示哦
})
3.用TreeLoader加载数据生成树
//这里只介绍TreeLoader的参数一个
dataUrl:"*****.**"//地址
url:"****.**"//url参数和dataUrl参数一样
效果图:
html代码:
<div id="container"></div>
js代码:
Ext.onReady(function(){
Ext.QuickTips.init();
var mytree=new Ext.tree.TreePanel({
el:"container",
animate:true,
title:"简单Extjs动态树",
collapsible:true,
enableDD:true,
enableDrag:true,
rootVisible:true,
autoScroll:true,
autoHeight:true,
width:150,
lines:true,
//这里简简单单的loader的几行代码是取数据的,很经典哦
loader:new Ext.tree.TreeLoader({
dataUrl:"json.ashx"
})
});
//根节点
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"控制面板",
expanded:true
});
mytree.setRootNode(root);
mytree.render();//不要忘记render()下,不然不显示哦
})
上面的代码中dataUrl地址为json.ashx的代码是怎样呢？
让我们先来思考一个问题：
/*---dataUrl的地址返回的内容必须为数组对象形式，但是.net页面如何返回这样的格式？---*/
我的解决方案:把.net数据转换为json对象。
using System.Web.Script.Serialization;
public string ToJson(object o)
{
JavaScriptSerializer j = new JavaScriptSerializer();
return j.Serialize(o);
}
这里的o，我们可以定义个类的对象，传进去，转换为json对象
json.ashx代码:
using System;
using System.Web;
using System.Collections.Generic;
using System.Web.Script.Serialization;
public class jsondata
{
//定义jsondata类，存放节点数据
public string id;
public string text;
public bool leaf;
public List<jsondata> children=new List<jsondata>();//存放子节点
}
public class json : IHttpHandler {
public List<jsondata> jsdata=new List<jsondata>();
public void ProcessRequest (HttpContext context) {
for (int i = 1; i < 5; i++)
{
jsondata jd = new jsondata();
jd.id="num"+i;
jd.text = "节点"+i;
jd.leaf = false;
for (int j = 1; j < 3; j++)
{
jsondata subjd = new jsondata();
subjd.id = "sub" + j;
subjd.text = "子节点" + j;
subjd.leaf = true;
jd.children.Add(subjd);
}
jsdata.Add(jd);
}
context.Response.Write(ToJson(jsdata.ToArray()));//ToArray()在IE里面好像缺了不行
}
public bool IsReusable {
get {
return false;
}
}
public string ToJson(object o)
{
//序列化对象为json数据，很重要！
JavaScriptSerializer j = new JavaScriptSerializer();
return j.Serialize(o);
}
}
异步获取它的数据:
分享到：
相关推荐
2. **组件库**：ExtJS 2.0提供了众多预定义的组件，如表格（GridPanel）、表单（FormPanel）、树形视图（TreePanel）、菜单（Menu）等。教程会详细介绍这些组件的用法，包括配置项、事件监听、数据绑定等。 3. **...
在本文中，我们将深入探讨`Ext.tree.TreeLoader`与JSON数据在Ext JS框架中的应用。`Ext.tree.TreeLoader`是Ext JS库中的一个组件，它负责加载和解析树形结构的数据，而JSON（JavaScript Object Notation）则是一种轻...
在描述中提到了 "extjs下拉树"，这可能是指 `Ext.tree.TreePanel` 结合 `TreeStore` 来实现的下拉树结构。下拉树允许用户从一个下拉框中选择一个树形结构的节点。实现方式是在 `ComboBox` 的配置中添加一个 `tree` ...
而`ExtJS2.0中文API`很可能是一个包含了详细说明、示例代码和类库参考的文档，对于学习和使用ExtJS 2.0至关重要。 总之，ExtJS 2.0中文API珍藏版是开发者学习和开发ExtJS应用的宝贵资源，结合Adobe AIR，可以实现...
### ExtJs2.0入门实例知识点详解 #### 1. Ext.MessageBox - **Ext.MessageBox.alert()** - **用途**: 显示一个简单的警告框。 - **参数**: - `title` (必需): 弹出框的标题。 - `msg` (必需): 显示的信息。 ...
7. **丰富的图表组件**：EXT2.0提供了一系列图表组件，如柱状图、饼图、线图等，用于数据可视化。 **EXT2.0 API** EXT2.0的API是其强大的基础，它包含了大量预定义的类和方法，供开发者在构建应用时调用。API分为...
EXT2.0 API文档是针对EXT JavaScript库的一个关键参考资料，主要涵盖了EXT库的版本2.0中的各种组件、方法和功能。EXT是一个强大的前端开发框架，尤其在构建数据驱动的Web应用程序方面表现突出。EXT2.0 API文档是...
13. **extJs 2.0 学习笔记**：这部分可能包括了针对2.0版本的一些特性讲解，如Ajax的使用、Ext.data模块的基础知识以及Panel组件的深入探讨。 以上只是对每个章节主题的简要概述，实际的学习笔记会更深入地讲解每个...
同时，"extjs2.0例子"提供了示例代码，有助于理解和应用所学知识。 通过深入学习"掏钱学EXTJS完全版"，开发者不仅能掌握EXTJS 2.0的核心技术，还能建立起对Web前端开发的深入理解，为后续EXTJS的升级学习或其他前端...
简单的介绍EXTJS,非常适合初学者 内容包含: 1)ExtJS简介 2)获得ExtJS 3)应用ExtJS 4)布局概述 5)ExtJS版的Hello 6)Ext类库简介 7)Border区域布局 8)ExtJS的组件 9)Column列布局 10)组件的使用 11)Fit布局 12)Form...
本文将深入探讨如何在Struts2.0.x框架下利用ExtJs库来实现动态树的解决方案。 首先，我们需要了解ExtJs。ExtJs是一个强大的JavaScript库，提供了丰富的组件和布局，用于构建富客户端应用程序。它提供了树形控件...
### EXTJS学习文档知识点解析 #### 一、EXTJS简介与环境配置 **EXTJS**是一种基于JavaScript的开源框架，用于构建复杂的Web应用程序。它提供了一系列丰富的用户界面组件，简化了网页开发过程，使得开发者能够快速...
2. **丰富的UI组件**：ExtJS提供了一系列预构建的UI组件，如表格、树形视图、网格、表单元素等，这些组件不仅易于使用，而且高度可定制。 3. **高性能**：通过优化的数据处理技术和异步加载策略，ExtJS确保了良好的...
13. **extJs 2.0 学习笔记**：这部分笔记涵盖了EXTJS 2.0版本的主要特性，包括Ajax的使用、数据管理基础、Panel的深入理解等，帮助开发者掌握EXTJS的基本用法。 EXTJS的学习是一个不断深入的过程，从基础组件到高级...
EXTJS是一种基于JavaScript的富客户端应用开发框架，它提供了一系列的UI组件，使得开发者能够构建功能强大、交互性丰富的Web应用程序。EXTJS的核心特性在于其组件化的开发模式，以及对DOM操作、事件处理和数据管理的...
EXTJS 2.0提供了更多组件示例和应用场景，例如WebIM系统，它利用EXTJS构建了即时通讯功能，包括一对一交流、聊天记录保存、多人会议室等。此外，开源人vifir.com的后台管理系统也广泛使用EXTJS，涵盖了新闻发布、...
在Ext2.0中，实现动态树主要依赖于`TreePanel`组件。这个组件允许开发者以树状结构展示数据，而且支持异步加载，这使得处理大量数据时更加高效。动态树常用于展现层级关系清晰的数据，如组织结构、文件系统或菜单...
通常，这包括`extjs/resources/css/ext-all.css`用于样式，`extjs/adapter/ext/ext-base.js`作为适配器，以及`extjs/ext-all.js`包含EXT_JS的核心功能。`Ext.onReady`函数在页面加载完成后执行，是EXT_JS应用的启动...