Ext的异步加载树

项目需求：要实现一个上下级的关系的管理。而且是单击一个节点，则根据这个节点去加载对应的数据。
解决思路：要实现一个有上下级的管理，自然而然的想到用树形结构去实现。用到了ext就会想到用ext的treePanel了。但是也考虑一个问题，是一次性加载所有的数据还是每次需要的时候加载呢？数据量大的话，前一种方式肯定不太行，如果每一次请求都取全部数据，对系统资源是一种浪费。所以，决定采用第二种方式，即异步加载tree。
1、新建一个TreePanel，包含了一个loader和一个root节点。

var billConfigTree = new Ext.tree.TreePanel({

        	columnWidth:.33,
        	//columnHeight:.100,
        	height:600,
        	collapsible: true,
        	margins:'5 0 5 5',
        	cmargins:'5 5 5 5',
        	rootVisible:false,
        	lines:true,        		
        	autoScroll:true,
        	root: new Ext.tree.AsyncTreeNode({
        		id:'root',
        		text:'分组信息',
        		expanded :true
        	}),
        	collapseFirst:false,	
        	loader:new Ext.tree.TreeLoader({
        		dataUrl:'getNodeData.action'
        	})
		});

2、然后我们再设置一个加载前的触发事件。

billConfigTree.on('beforeload',function(node){        
            billConfigTree.loader.dataUrl = 'getNodeData.action?nodeId='+node.id;
        });

这样，我们就完成了一个异步加载的树形结构了。是不是很简单呢？呵呵。
需要注意的一点是：上级节点和下级节点的id不能相同，否则会出现点击上级节点的“+”可以展开下级节点，但是如果点击“-”却不能收起下级节点的问题了。