冷雨在线
EasyJWEB,JavaScript,Spring,JPA,MySql
半路出家,现在混JAVA.
我的首页
文章
相册
圈子
留言
管理
 
    当前所在页面:首页>>文章>>《ExtJS2.0实用简明教程》之TreePanel基本使用
《ExtJS2.0实用简明教程》之TreePanel基本使用
    作者:小雨 来源: 发表时间:2008-02-24

 
 

 《ExtJS实用开发指南》印刷版3月10号推出,赶快去看看吧。 

 在应用程序中,我们经常会涉及到要显示或处理树状结构的对象信息,比如部门信息、地区信息,或者是树状的菜单信息,操作系统中的文件夹信息等。
  对于传统的html页面来说,要自己实现显示树比较困难,需要写很多的javascript,特别是对于基于Ajax异步加载的树来说,不但涉及到Ajax数据加载及处理技术,还需要考虑跨浏览器支持等,处理起来非常麻烦。ExtJS中提供了现存的树控件,通过这些控件可以在B/S应用中快速开发出包含树结构信息的应用。

  TreePanel基本使用

  树控件由Ext.tree.TreePanel类定义,控件的名称为treepanel,TreePanel类继承自Panel面板。在ExtJS中使用树控件其实非常简单,我们先来看下面的代码

Ext.onReady(function(){
	var root=new Ext.tree.TreeNode({
		id:"root",
		text:"树的根"});
	root.appendChild(new Ext.tree.TreeNode({
		id:"c1",
		text:"子节点"
	}));
	var tree=new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:100
	});
 });

 

  代码的第一句使用new Ext.tree.TreeNode类来创建一个树节点,第二句使用树节点的root的appendChild方法来往该节点中加入一个子节点,最后直接使用new Ext.tree.TreePanel来创建一个树面板,要树面板的初始化参数中指定树的root属性值为前面创建的root节点,也就是树根节点。上面的程序执行效果如下图所示:

 

   树的节点信息。ExtJS的树控件提供了对这种功能的支持,你只需要在创建树控件的时候,通过给树指定一个节点加载器,可以用来从服务器端动态加载树的节点信息。我们来看下面的代码:

var root=new Ext.tree.AsyncTreeNode({
		id:"root",
		text:"树的根"});
	var tree=new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		loader: new Ext.tree.TreeLoader({url:"treedata.js"}),
		width:100
	});

 

treedata.js这个url返回的内容如下:

[{
        id: 1,
        text: '子节点1',
        leaf: true
    },{
        id: 2,
        text: '儿子节点2',
        children: [{
            id: 3,
            text: '孙子节点',
            leaf: true
        }]
	   }]

执行上面的程序,可以得到一棵异步加载子节点的树,点击“根节点”会到服务器端加载子节点,如下图所示:

 

   当然上面的程序是一次性加载完了树的所有节点信息,我们也可以实现让每一个节点都支持动态加载的树,只需要在通过服务器请求数据的时候,每次服务器端返回的数据只只包含子节点,而不用把孙子节点也返回即可。比如把上面treedata.js中的内容改为下面的内容:

[{
        id: 1,
        text: '子节点',
        leaf: false
	    }]

  也就是节点树中只包含一个子节点,而该子节点通过指定leaf值为false (默认情况该值为false),表示该节点不是一个叶子节点,其下面还有指节点。再执行前面的程序,不断点击“子节点”可以得到如下图所示的效果:

 

  当然这是一个无限循环的树,在实际应用中我们服务器端返回的数据是程序动态产生的,因此不可能每一次都产生leaf为false的节点,如果是叶子节点的时候,则需要把返回的JOSN对象中的leaf设置为true。如下所示:

[{
        id: 1,
        text: '子节点',
        leaf:true
    }]

  事件处理

  当然,仅仅能显示一棵树还不够,我们一般还需要在用户点击树节点的时候执行相应的东西,比如打开某一个连接,执行某一个函数等,这就需要使用到事件处理。比如下面的代码:

Ext.onReady(function(){
	var root=new Ext.tree.TreeNode({
		id:"root",
		text:"树的根"});
	var c1=new Ext.tree.TreeNode({
		id:"c1",		
		text:"子节点"
	});
	root.appendChild(c1);
	var tree=new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:100
	});
	tree.on("click",function(node,event){
		alert("您点击了"+node.text);
	}
	);
	c1.on("click",function(node,event){
		alert("您点击了"+node.text);
	}
	);
	
 });

   执行上面的程序,当用户点击树控件中的任意节点时,都会弹出一个提示信息框,当用户点击c1这个子节点时,会弹出两次提示信息框。因为我们除了指定tree的click事件响应函数以外,另外又给node节点指定单独的事件响应函数。
  
  当然,如果只是要实现当点击树节点时跳到某一个指定url的功能则非常简单。看下面的代码:

Ext.onReady(function(){
	var root=new Ext.tree.TreeNode({
		id:"root",
		href:"http://www.easyjf.com",
		hrefTarget:"_blank",
		text:"树的根"});
	var c1=new Ext.tree.TreeNode({
		id:"c1",	
		href:"http://wlr.easyjf.com",	
		hrefTarget:"_blank",
		text:"子节点"
	});
	root.appendChild(c1);
	var tree=new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:100
	});
	
	 });

  执行程序,点击树节点,将会在浏览新窗口中打开节点中href指定的链接。

上一篇:《ExtJS2.0实用简明教程》之Store   下一篇:《ExtJS2.0实用简明教程》之使用树控件TreeNode

 
 

(阅读 )   评论数(:0)
评论】 【收藏】
评论:共0条

发表评论:
发表人:
评论: 
    
 
关于我们 | 诚聘英才 | 联系我们 | 广告业务 | 网站地图 | 法律声明

EasyJF开源团队版权所有  建议使用1024*768分辨率