Ext.TreePanel

原创 2008年10月03日 23:32:00

1.第一个静态树--最简单的树
效果图:

 

html代码:
<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.用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);
}
}

异步获取它的数据:

 

好了。
这里是模拟出数据,从数据库中取出数据再处理为节点数据 ,一个道理!

Ext.TreePanel基本配置参数

TreePanel基本配置参数: //TreePanel配置参数 1.animate:true//展开,收缩动画,false时,则没有动画效果 2.autoHeight:true//自动高度...
  • ShenJiancomputer
  • ShenJiancomputer
  • 2012年10月11日 17:01
  • 2199

Ext.TreePanel之第一式

leaf:false,//是否为叶子节点 这个需要自己设,他不会管实际情况是不是的   1.第一个静态树--最简单的树 效果图: html代码:...
  • wangddddd1
  • wangddddd1
  • 2017年12月11日 17:45
  • 19

ExtJs2.0学习系列--Ext.TreePanel之第一式

TreePanel是继承自Panel,所以很多在Panel中谈到的属性这里可能会一笔带过,如有问题,请参考ExtJs2.0学习系列--Ext.Panel 1.第一个静态树--最简单的树效果图:html...
  • liyuandong1985
  • liyuandong1985
  • 2009年10月26日 11:08
  • 646

Ext JS 学习(12) Ext.TreePanel的使用 第一式

今天开始,我们就开始一起学习TreePanel了,道个歉,上篇的代码很乱阿.我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰!TreePanel是继承自Panel,所以...
  • witcheryne
  • witcheryne
  • 2008年11月01日 11:10
  • 2106

ExtJs2.0学习教程(13)--Ext.TreePanel之第二式

昨天有朋友说,在IE下有的时候ashx传过来的节点不能加载,其实我也出现这样的问题,很是烦人! 今天extjs上看到了一个解决方案,觉得很好:如果treeLoader加载失败,会继续加载,直到成功加...
  • qing419925094
  • qing419925094
  • 2011年08月09日 16:22
  • 539

ExtJs2.0学习系列(12)--Ext.TreePanel之第一式

 TreePanel是继承自Panel,所以很多在Panel中谈到的属性这里可能会一笔带过,如有问题,请参考ExtJs2.0学习系列(2)--Ext.Panel 1.第一个静态树--最简单的树效果图:...
  • cw2008
  • cw2008
  • 2008年10月05日 17:52
  • 247

ExtJs2.0学习系列(13)--Ext.TreePanel之第二式

 昨天有朋友说,在IE下有的时候ashx传过来的节点不能加载,其实我也出现这样的问题,很是烦人!今天extjs上看到了一个解决方案,觉得很好:如果treeLoader加载失败,会继续加载,直到成功加载...
  • cw2008
  • cw2008
  • 2008年10月05日 17:55
  • 275

异步Ext.TreePanel获取后台数据时的注意事项

在Web页面实现树形结构无疑会带来很酷的界面效果。但是如果这棵树上的节点非常的多,那么一次性导入整个树形结构就会使web页面长期处于处理等待状态。所以遇到这样的情况,较通常的解决方案就是采用异步树结构...
  • u010395804
  • u010395804
  • 2014年07月11日 16:49
  • 1196

ExtJS4 Ext.tree.Panel获取Node对象

Ext4改了好多,树控件都改得自己不认识了,切入正题: 在Ext3中只要注册了'click','contextmenu',就会将Node对象传进来,代码示例: contextmenu : fu...
  • leecho571
  • leecho571
  • 2011年09月22日 00:11
  • 22211

Extjs带checkbox树三态例子

近期会更新到3.1。^_^最近正在学习Extjs,用到了2.X版本里提供了 带有checkbox的树这个功能,我自己应有的例子,效果图如下:  js代码:  建立窗口main.js:Ext.onRea...
  • weil001
  • weil001
  • 2009年03月20日 15:02
  • 14121
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ext.TreePanel
举报原因:
原因补充:

(最多只允许输入30个字)