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