EXT：指定树控件TreePanel 展开到第几层

对于 Ext.tree.TreePanel，相信使用过EXT的人一般都用到过。所以本文中不会包含EXT或TreePanel 基础知识的介绍了

比如做一个行政区划的树。如下图所示：

但在有的时候，这颗树的数据量会很大，层级也会很深，默认全部展开的话，会很慢，而且显示一大堆东西出来，显示不符合用户的需求。可又不是默认全部折叠，这样用户又第一眼看不见想关心的东西的内容。

所以笔者在这里提出了一个解决方案：展开到指定层级。

如上图所示，在笔者刚刚完成的一个项目中，用户只需要关心乡镇的信息，偶尔会查看一下乡镇下面的村组信息。所以在这次应用中，需要默认把树展开到乡镇一级。

要达到以上目的呢，目前有两种手段：

1）通过异步得到的节点数据信息中，将需要展开的节点加属性定义：expanded:true

如一个json格式的节点： {id:"XXXX",text:"YYYY",expanded:true}

这种方式需要编写异步取数据代码时，根据你要展开到的层级，计算哪些节点需要做设置：expanded:true

2）利用Treepanel的load事件，定义其响应函数，在响应函数中添加控制逻辑。

因为第一种方式，太过繁琐，不适合封装成项目级的控件，所以本文将重点介绍第二种方式。

先来晒晒load事件的响应函数中的部分代码：[load事件：在节点加载后触发。Fires when a node is loaded]

在下面的代码中，除了实现了可以展开到指定层数，还可以只展开第一个节点及该节点之下的各层子节点。

        var level=2;//通过这里指定展开到第几层
        
        if(level==0)//此时规定：只展开第一个节点及其所有子节点
	{  
	       Ext.each(node.childNodes, function(n){ 	
		    if(n.isFirst())
		    {
			if(!n.isLeaf())        
			{
		           if(!n.isLoaded())
		           {	    
				          			          		   
			      n.reload();
			   }
			}
			          	
		     }
		          
		 });
		          
	}
        if(level>0)//此时规定：根据设置的层数，展开到第level层
        {
	    	var path=node.getPath();
	        var index=path.indexOf('/');
	        var loadedlevel=0;
	        while(index>=0) 
	        {
	        	loadedlevel++;
	        	index=path.indexOf('/',index+1);       	
	        }
	        if(loadedlevel<level)
	        {
	        	Ext.each(node.childNodes, function(n){ 	
					              
		          if(!n.isLeaf()) //zhangpf 当n.isLeaf()=true时，n为Ext.tree.TreeNode类型，不具有isLoaded()和reload()方法       
			  {
			        if(!n.isLoaded())
			        {	    
			          			          		   
			          	n.reload();
			        }
		          }
		       });
		          
	        }
        }

代码不难，这里就不多做详解。这里只说一点：关于isLoaded()和reload()方法，它们不是TreeNode的方法，而是属于AsyncTreeNode的方法。所以在用它们时，要格外小心。

OK，再晒下完整点的代码，它是我封装的struts的页面控件，最终生成的部分js。我又拿来修改些，去掉了些，所以不保证一定能运行起来。

这里补充一句：这里的展开到指定层的逻辑，同样适用于Ext改写的ComboboxTree

  Ext.onReady(function(){
	   var tree = new Ext.ux.ComboBoxTree({
			id:'XXXX',
			renderTo : 'XXX_div',
			hiddenName:"XXX_name",
			name: 'folderMoveTo',
			displayField: 'text',
 		        valueField: 'id',
			width : 200,
			typeAhead: true, 
   			triggerAction: 'all',
		        autoScroll : false,  
		        selectOnFocus: true,
                        forceSelection: true,
			tree : {
				xtype:'treepanel',
				listeners:{beforeload:loadTree,load:afterload},				
				 rootVisible: true,
			     autoScroll : false,   
                 autoHeight : true,  
	       	 	 root : new Ext.tree.AsyncTreeNode({id:'-1',text:'-请选择-'})
	    	},
	    				
			selectNodeModel:'all'
		});
		
		tree.setValue({id:'',text:'-请选择-'});
	});
		
		
	function loadTree(node){
		if (node.id == "-1") {		 
				tree.tree.loader.dataUrl =  'http://127.0.0.1:9900/gmitp/platform/system/listAllArea.action?parentNodeId=-1';
		} else  {	 	
			tree.tree.loader.dataUrl = 'http://127.0.0.1:9900/gmitp/platform/system/listAllArea.action?parentNodeId='+node.id;
		}

	}	
	
	
	function afterload(node){
	
		//实现设置展开层数.
        var level=3;
        
        if(level==0)//此时规定：只展开第一个节点及其所有子节点
	        {  
	        	Ext.each(node.childNodes, function(n){ 	
					if(n.isFirst())
					{
						if(!n.isLeaf())        
						{
				          	if(!n.isLoaded())
				          	{	    
				          			          		   
				          		n.reload();
				          	}
			          	}
			          	return;
		          	}
		          
		         });
		          
	     }
        if(level>0)//此时规定：根据设置的层数，展开到第level层
        {
	    	var path=node.getPath();
	        var index=path.indexOf('/');
	        var loadedlevel=0;
	        while(index>=0) 
	        {
	        	loadedlevel++;
	        	index=path.indexOf('/',index+1);       	
	        }
	        if(loadedlevel<level)
	        {
	        	Ext.each(node.childNodes, function(n){ 	
					              
		          	if(!n.isLeaf()) //zhangpf 当n.isLeaf()=true时，n为Ext.tree.TreeNode类型，不具有isLoaded()和reload()方法       
					{
			          	if(!n.isLoaded())
			          	{	    
			          			          		   
			          		n.reload();
			          	}
		          	}
		         });
		          
	        }
        }
	}