Extjs加载两棵树

Extjs在使用accordion layout，总共分2个页签，每个页签都有一棵树

Js代码

1. layout:'accordion',     
2.                  layoutConfig:{     
3.                      animate:true,   
4.                      hideCollapseTool:true  
5.                  },     
6.                  items: [{     
7.                      title:'导航',     
8.                      autoScroll:true,     
9.                      border:false,     
10.                      iconCls:'nav',     
11.                      html:'<div id="nav-tree" style="overflow:auto;height:400px;border:0px solid c3daf9;"></div>'  
12.                     }     
13.                  ,{     
14.                      title:'用户设置',     
15.                      html: '<div id="set-tree" style="overflow:auto;height:400px;border:0px solid c3daf9;"></div>',     
16.                      border:false,     
17.                      autoScroll:true,     
18.                      iconCls:'settings'     
19.                  }]  、   
20.   
21.   
22. //树～～～   
23. var navtree;   
24.         var settree;   
25.         var sroot;   
26.         var root;   
27.         if(!navtree){     
28.             navtree = buildTree('nav-tree');   
29.             root = new Ext.tree.AsyncTreeNode({     
30.                  text: '导航菜单',     
31.                  draggable:false,     
32.                  id:'nroot'     
33.              });     
34.             navtree.setRootNode(root);   
35.             root.appendChild(new Ext.tree.TreeNode({text:"按钮"}));   
36.             navtree.render();     
37.             root.expand();    
38.         };   
39.            
40.         if(!settree){   
41.             settree = buildTree('set-tree');   
42.             sroot = new Ext.tree.AsyncTreeNode({     
43.                  text: '设置菜单',     
44.                  draggable:false,     
45.                  id:'sroot'     
46.              });     
47.             settree.setRootNode(sroot);   
48.             sroot.appendChild(new Ext.tree.TreeNode({text:"按钮"}));   
49.             settree.render();   
50.             sroot.expand();    
51.             settree.show();    
52.                        
53.         };   
54.   
55.        function buildTree(divid){   
56.              var tree = new Ext.tree.TreePanel({     
57.                  el:divid,    
58.                  //applyTo:divid,    
59.                  autoScroll:true,                     
60.                  animate:true,     
61.                  border:false,     
62.                  enableDD:true,     
63.                  containerScroll: true,   
64.                  lines:false,    
65.                  autoShow:true,   
66.                  rootVisible:false});   
67.              return tree;   
68.        };  

layout:'accordion',                   layoutConfig:{                       animate:true,                     hideCollapseTool:true                 },                   items: [{                       title:'导航',                       autoScroll:true,                       border:false,                       iconCls:'nav',                       html:'<div id="nav-tree" style="overflow:auto;height:400px;border:0px solid c3daf9;"></div>'                    }                   ,{                       title:'用户设置',                       html: '<div id="set-tree" style="overflow:auto;height:400px;border:0px solid c3daf9;"></div>',                       border:false,                       autoScroll:true,                       iconCls:'settings'                   }]  、//树～～～var navtree;		var settree;		var sroot;		var root;		if(!navtree){  	        navtree = buildTree('nav-tree');	        root = new Ext.tree.AsyncTreeNode({  		         text: '导航菜单',  		         draggable:false,  		         id:'nroot'  		     });  		    navtree.setRootNode(root);	        root.appendChild(new Ext.tree.TreeNode({text:"按钮"}));	        navtree.render();       		root.expand();         };                if(!settree){        	settree = buildTree('set-tree');        	sroot = new Ext.tree.AsyncTreeNode({  		         text: '设置菜单',  		         draggable:false,  		         id:'sroot'  		     });  		    settree.setRootNode(sroot);	        sroot.appendChild(new Ext.tree.TreeNode({text:"按钮"}));	        settree.render();	        sroot.expand(); 	        settree.show();	     		      	        };       function buildTree(divid){       		 var tree = new Ext.tree.TreePanel({  		         el:divid, 		         //applyTo:divid, 		         autoScroll:true,		           		         animate:true,  		         border:false,  		         enableDD:true,  		         containerScroll: true,		         lines:false, 		         autoShow:true,		         rootVisible:false});		     return tree;       };

现在的问题是，第一棵树可以显示，第二页上的树不能显示，用firebug调试的时候，设置断点，在第二棵树显示之前用鼠标切换到第二页签，树能够正常显示？我感觉是extjs的按需加载的问题，
有什么办法能让这2棵树同时显示？？
现在暂时的解决办法是，第二棵树使用另外的方式构造，代码如下：

Js代码

1. if(!settree){   
2.         settree = new Ext.tree.TreePanel({     
3.              autoShow:true,   
4.              autoScroll:true,                     
5.              animate:true,     
6.              border:false,     
7.              enableDD:true,     
8.              containerScroll: true,   
9.              lines:false,    
10.              autoShow:true,   
11.              rootVisible:false})           
12.        };   
13.        sroot = new Ext.tree.AsyncTreeNode({     
14.              text: '设置菜单',     
15.              draggable:false,     
16.              id:'sroot'     
17.     });   
18.        settree.setRootNode(sroot);   
19.     sroot.appendChild(new Ext.tree.TreeNode({text:"按钮"}));   
20.     settree.render(Ext.get('set-tree'));   
21.     settree.expandAll();   

转载于:https://www.cnblogs.com/zhangh/archive/2008/10/26/1319818.html