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省略。