最近部門同事碰到一個問題,將ztree嵌入在套了幾層Panel的面板中不會正常顯示,可是將上層面板換成window就能正常顯示,開始覺得是所在的外部容器無論嵌套了幾層,可是必須最底層是window容器,可是測試後發現不是這樣的,而後又仔細的看了下代碼,原來個人js文件是動態加載的,在這種狀況下會有一個刷新前後順序的問題,雖然執行了樹的加載事件,可是在panel中沒有任何顯示,通過測試最終的成功解決辦法是:html
在panel中添加afterlayout事件,具體的代碼以下:node
var treepanel = new Ext.Panel({
width: 300,
region: 'west',
html: "<div id=\"pnlTree\" class=\"ztree\"></div>",
listeners: {
'afterlayout': function() {
initTree();
}
}
});
測試
function initTree() {
zTree = $.fn.zTree.init($("#pnlTree"), setting, treeNodes);
var nodes = zTree.getNodes();
if (nodes.length > 0) {
zTree.expandNode(nodes[0], true, false, false);
}
}
spa
須要注意的是treepanel中的id不能與div中的id重名,若是重名也不會正常顯示樹菜單,咱們能夠默認把treepanel中的id省略。htm