extjs 异步加载树的构建

最新推荐文章于 2014-11-12 16:02:00 发布

原创最新推荐文章于 2014-11-12 16:02:00 发布 · 223 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#EXT

extjs 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用ExtJS中的TreePanel实现异步加载数据，通过监听'beforeload'事件来动态请求节点数据，有效减少页面加载时间。

在一个目录层次比较多的Tree中，一次性构造一棵树，不是一个好的实践，因为那样在Tree加载时，会耗用过多的时间，所以，利用异步的方式构建Tree就显得重要了。

Ext.tree.TreePanel从机制上，提供了异步加载的机制，通过对‘beforeload’事件的响应：

var treeUrl ='url';
new Ext.tree.TreePanel({
...
   root : new Ext.tree.AsyncTreeNode({
				id:'root'
				}),

   listeners : {
	'beforeload':function(node){
		if(node.id == 'root')
		{
			tree.loader.dataUrl=treeUrl;
		}
		else
		{//Url和需要的参数
			tree.loader.dataUrl=treeUrl+'?id='+node.id+'&text='+encodeURI(encodeURI(node.text));//
		}
	}
	}
});

ExtJS会自动的处理这个事件的调用：当TreeNode的leaf属性为false，第一次打开时，就调用所定义的url，加载下级数据，且这个数据只加载一次。