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.        };  

现在的问题是，第一棵树可以显示，第二页上的树不能显示，用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();   
posted @ 2008-10-26 14:01  zhangh  阅读(1264)  评论(1)  编辑  收藏  举报