Extjs中使用AsyncTreeNode生成树

Extjs中使用AsyncTreeNode生成树

1、在使用AsyncTreeNode动态的生成树的时候，要使用到Ext.tree.TreeLoader进行请求

AsyncTreeNode是异步的请求，要求返回一个Json格式的字符串，需要注意的是，如果返回的字符串中带有中文，就需要把请求处理页面的编码方式设置成为utf-8，如果使用GBK或者GB2312等编码，返回的字符串将不会显示成为子节点，表现形式与没有找到请求文件的形式一样。

 

Ext.onReady(

	function() {
		Ext.BLANK_IMAGE_URL = "../ext_js3/resources/images/default/s.gif";
		
		// 异步根节点
		var root = new Ext.tree.AsyncTreeNode({
		
			id:"root",
			text:"根节点",
			loader:new Ext.tree.TreeLoader({
				url:"treedata.js"
			})
		});
		
		var tree = new Ext.tree.TreePanel({
			
			applyTo:"treePanel",
			root:root,
			width:400,
			height:300,
			title:"treePanel"
		});
	}
)

 

[{
	id:"childNode1",
	text:"子节点1",
	leaf:true
},
{
	id:"childNode2",
	text:"子节点2",
	leaf:true
},
{
	id:"childNode3",
	text:"子节点3",
	leaf:true
}]

 

 

结果的显示形式为：

 

 

如果请求处理页面的编码方式不为utf-8且返回字符串中带有中文，当你单击根节点的时候，显示效果如下：

 

2、如果返回字符串中的leaf属性不进行设置或者设置为false,且它底下没有给出子节点，那么就会形成一个循环显示。所以当节点是叶子节点的时候，必须把它设置成true

 

[{
	id:"childNode1",
	text:"子节点1",
	leaf:false
},
{
	id:"childNode2",
	text:"子节点2",
	leaf:true
},
{
	id:"childNode3",
	text:"子节点3",
	leaf:true
}]

 显示效果如下：

 3、多层次树的显示

[{
	id:"childNode1",
	text:"子节点1",
	leaf:true
},
{
	id:"childNode2",
	text:"子节点2",
	leaf:false,
	children:[
		{
			id:"gChildNode1",
			text:"孙子节点1",
			leaf:true
		},
		{
			id:"gChildNode2",
			text:"孙子节点2",
			leaf:true
		}
	]
},
{
	id:"childNode3",
	text:"子节点3",
	leaf:true
}]

 显示效果：