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

 
 

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

    在ExtJS中,不管是叶子节点还是非叶子节点,都统一用TreeNode表表示树的节点。在ExtJS中,有两种类型的树节点。一种节点是普通的简单树节点,由Ext.tree.TreeNode定义,另外一种是需要异步加载子节点信息的树节点,该类由Ext.tree.AsyncTreeNode定义。 看下面的代码:

Ext.onReady(function(){	
	var tree=new Ext.tree.TreePanel({
		renderTo:"hello",
		root:new Ext.tree.AsyncTreeNode({		
		text:"根节点"
		}),
		width:100
	});	
 });

   执行程序,点击树中的“根节点”则会一直发现树会尝试加载这个节点的子节点,由这里没有指定树的加载器,所以“根节点”会变成一直处于加载的状态。如下图所示:

 

  对于普通的TreeNode来说,可以通过调用节点的appendChild、removeChild等方法来往该节点中加入子节点或删除子节点等操作。

  TreeNode与AsyncTreeNode可以同时使用,比如下面的代码:

Ext.onReady(function(){

	var root=new Ext.tree.TreeNode({
		id:"root",	
		text:"树的根"
		});	
	var c1=new Ext.tree.TreeNode({
		text:"子节点1"
	})
	var c2=new Ext.tree.AsyncTreeNode({
		text:"子节点2"
	});
	root.appendChild(c1);
	root.appendChild(c2);	
	var tree=new Ext.tree.TreePanel({
		renderTo:"hello",
		root:root,
		width:300,
		loader:new Ext.tree.TreeLoader({
		applyLoader:false,
		url:"treedata.js"
		})
	});
	
 });
	treedata.js中的内容仍然是:
[{
        id: 1,
        text: '子节点'
	    }]

  执行上面的程序可以得到一棵如下图所示的树:

 

   另外要在树以外的程序中得到当前选择的节点,可以通过TreePanel的getSelectionModel方法来获得,该方法默认返回的是Ext.tree.DefaultSelectionModel对象,DefaultSelectionModel的getSelectedNode方法返回当前选择的树节点。比如要得到树tree中中当前选择节点,代码如下:

tree.getSelectionModel().getSelectedNode()

上一篇:《ExtJS2.0实用简明教程》之TreePanel基本使用   下一篇:《ExtJS2.0实用简明教程》之使用树控件TreeLoader

 
 

(阅读 )   评论数(:15)
评论】 【收藏】
评论:共15条
这年头没有雷锋哦........
评论人: 匿名用户     评论时间: 2008-10-07 16:54:44
I'm impressed! You've managed the amlsot impossible.
评论人: ifZcTCyOAz     评论时间: 2012-06-02 11:48:19
hL4WlV  <a href="http://rvtjthfmbrqf.com/">rvtjthfmbrqf</a>
评论人: MeCSEgKXbBg     评论时间: 2012-06-02 14:31:37
xqC4we , [url=http://vbdeuligmlbp.com/]vbdeuligmlbp[/url], [link=http://vabzfudyfefk.com/]vabzfudyfefk[/link], http://brlrehxwdrgn.com/
评论人: YunneZWowlZDqUdXwGO     评论时间: 2012-06-03 07:12:19
rV0i2S  <a href="http://alnygdjmhvbf.com/">alnygdjmhvbf</a>
评论人: bQOPrjGI     评论时间: 2012-06-04 11:44:36
dOCjg4 , [url=http://eefdnktpnwnt.com/]eefdnktpnwnt[/url], [link=http://wzfxejnippdp.com/]wzfxejnippdp[/link], http://eiyljoeqpyye.com/
评论人: IRTmuzFCOheZpfrD     评论时间: 2012-06-04 17:51:20
Eveyorne would benefit from reading this post
评论人: sevXoCbtzZpafK     评论时间: 2013-05-23 19:21:07
qe3Ezu  <a href=\"http://gzeaolsmewdg.com/\">gzeaolsmewdg</a>
评论人: kiIYYNJqnLWfGDl     评论时间: 2013-05-24 21:30:04
wh0cd7004082 <a href=http://buyvaltrex16.top/>valtrex</a> <a href=http://citalopram5.top/>citalopram</a> <a href=http://effexor2011.gdn/>effexor xr cost</a>
评论人: BrettfrinI     评论时间: 2017-06-17 12:33:47
wh0cd403834 <a href=http://buyventolin.us.org/>ventolin online pharmacy</a>
评论人: BrettfrinI     评论时间: 2017-08-01 17:35:00
dove comprare il cialis in italia

<a href="http://cialisxrm.com/">buy cialis online</a>

cialis und tauchen

<a href=http://cialisxrm.com/>http://cialisxrm.com/</a>
评论人: RalphGut     评论时间: 2017-09-08 09:26:55
评论人: MatthewNunda     评论时间: 2017-09-20 23:15:29
评论人: MatthewNunda     评论时间: 2017-09-21 18:32:31
评论人: MatthewNunda     评论时间: 2017-09-22 02:33:50
评论人: MatthewNunda     评论时间: 2017-09-22 08:09:35

发表评论:
发表人:
评论: 
验证码:
请输入前面图中的四位验证码,字母不区分大小写
  
 
关于我们 | 诚聘英才 | 联系我们 | 广告业务 | 网站地图 | 法律声明

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