《ExtJS2.0实用简明教程》之TreePanel基本使用

在应用程序中，我们经常会涉及到要显示或处理树状结构的对象信息，比如部门信息、地区信息，或者是树状的菜单信息，操作系统中的文件夹信息等。
　　对于传统的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指定的链接。