ExtJS中使用ztree 不显示树的解决办法

最近部门同事碰到一个问题，将ztree嵌入在套了几层Panel的面板中不会正常显示，但是将上层面板换成window就能正常显示，开始以为是所在的外部容器不管嵌套了几层，但是必须最底层是window容器，但是测试后发现不是这样的，然后又仔细的看了下代码，原来我的js文件是动态加载的，在这种情况下会有一个刷新先后顺序的问题，虽然执行了树的加载事件，但是在panel中没有任何显示，经过测试最终的成功解决办法是：

在panel中添加afterlayout事件，具体的代码如下：

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

需要注意的是treepanel中的id不能与div中的id重名，如果重名也不会正常显示树菜单，我们可以默认把treepanel中的id省略。

转载于:https://www.cnblogs.com/caowei-it/p/4145744.html