Extjs在使用accordion layout,总共分2个页签,每个页签都有一棵树
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棵树同时显示??
现在暂时的解决办法是,第二棵树使用另外的方式构造,代码如下:
if(!settree){
settree = new Ext.tree.TreePanel({
autoShow:true,
autoScroll:true,
animate:true,
border:false,
enableDD:true,
containerScroll: true,
lines:false,
autoShow:true,
rootVisible:false})
};
sroot = new Ext.tree.AsyncTreeNode({
text: '设置菜单',
draggable:false,
id:'sroot'
});
settree.setRootNode(sroot);
sroot.appendChild(new Ext.tree.TreeNode({text:"按钮"}));
settree.render(Ext.get('set-tree'));
settree.expandAll();