小菜使用如下代码生成TreePanel，代码与ExtJs自带的examples类似，在Firefox下运行正常，不过在IE下无法正常显示。
Code
<scriptlanguage="JavaScript"type="text/javascript">
<!--
Ext.BLANK_IMAGE_URL='../resources/ext/resources/images/default/s.gif';
Ext.onReady(function(){
varddTree=newExt.tree.TreePanel({
el:'ddTree',
useArrows:true,
enableDD:true,
width:200,
height:300,
loader:newExt.tree.TreeLoader({
dataUrl:"xxx.ashx"
}),
rootVisible:false,
root:newExt.tree.AsyncTreeNode({}),
listeners:{
'beforeload':beforeloadHandler,
'load':loadHandler
}
});
ddTree.render();
ddTree.expandAll();//展开所有结点
varloading=null;
functionbeforeloadHandler(){//加载前事件响应处理
loading=newExt.LoadMask(Ext.get(ddTree.getEl()),{msg:"请等待"});
loading.show();
}
functionloadHandler(){//加载后事件响应处理
loading.hide();
}
});
-->
</script>
分析问题：
1、是否是xxx.ashx出现异常？
使用Firefox工作正常，所以排除，并且通过Firebug取到xxx.ashx输出json数据如下，所以该可能排除。
[{"id":59,"text":"web development","leaf":false,"children":[{"id":60,"text":"","leaf":false,"children":[]},{"id":61,"text":"php","leaf":false,"children":[]}]},{"id":62,"text":"web development","leaf":false,"children":[{"id":63,"text":"","leaf":false,"children":[]},{"id":64,"text":"php","leaf":false,"children":[]}]}]
2、TreePanel不兼容IE？
这显然是个笑话。不过可以验证下，将Firebug取到的json数据放入root结点的children: json。在IE下工作正常。所以该可能排除。
3、TreeLoader在IE下工作不正常？
暂时其它可能排除了，所以就它最可能了。
那怎么解决呢？可以使用Ajax取到xxx.ashx传来的数据，然后转为json放入root结点的children就ok了。试下。
Code
<scriptlanguage="JavaScript"type="text/javascript">
<!--
Ext.BLANK_IMAGE_URL='../js/ext/images/default/s.gif';
Ext.onReady(function(){
varforumTree=newExt.tree.TreePanel({
el:'forumtree',
useArrows:true,
enableDD:true,
width:200,
height:300,
rootVisible:false,
root:newExt.tree.AsyncTreeNode({})
});
forumTree.render();
//加载提示
varloading=null;
functionshowLoading(){
loading=newExt.LoadMask(Ext.get(forumTree.getEl()),{msg:"请等待"});
loading.show();
}
functionhideLoading(){
loading.hide();
}
showLoading();
//由于使用TreeLoader在IE下无法正常加载数据,所以使用Ajax先获取数据再填充数据到rootnode下
Ext.Ajax.request({
url:'xxx.ashx',
success:function(request){
vardata=Ext.util.JSON.decode(request.responseText);
forumTree.getRootNode().appendChild(data);
forumTree.getRootNode().expandChildNodes(true);
hideLoading();
},
failure:function(){
hideLoading();
Ext.MessageBox.show({
title:'版块管理',
msg:'对不起,加载数据出现异常,请重试!',
buttons:Ext.MessageBox.OK,
icon:Ext.MessageBox.ERROR
});
}
});
});
-->
</script>
问题解决。。。
不过这样我们又会碰到一个问题，就是当CRUD这个树结点提交到Server后，如何刷新Tree。如果只是重新调用Ajax。会有重复的结点出现。
因为上面使用的是在root下用appendChild来实现。所以刷新时应该先删除root下的所有子结点。怎么删呢？
forumTree.root.removeChildNodes()？噢,sorry。这个方法不存在。简单我们自己来一个。
Code
functionremoveChildNodes(node){
while(node.firstChild){
removeChildNodes(node.firstChild);
}
if(node.getDepth()!="0"){
node.remove();
}
}
在刷新的时候只要把forumTree.root传入该方法就可以了。
如果觉得《ExtJs TreePanel使用TreeLoader在IE下无法正常加载显示的解决方法》对你有帮助，请点赞、收藏，并留下你的观点哦！
