loadmask在树上应用

<script language="JavaScript" type="text/javascript">
<!--
Ext.BLANK_IMAGE_URL = '../resources/ext/resources/images/default/s.gif';

Ext.onReady(function() {
var ddTree = new Ext.tree.TreePanel({
el: 'ddTree',
useArrows: true,
enableDD: true,
width: 200,
height: 300,
loader: new Ext.tree.TreeLoader({
dataUrl: "xxx.ashx"
}),
rootVisible: false,
root: new Ext.tree.AsyncTreeNode({}),
listeners: {
'beforeload': beforeloadHandler,
'load': loadHandler
}
});

ddTree.render();
ddTree.expandAll(); // 展开所有结点

　　 var loading = null;
function beforeloadHandler() { // 加载前事件响应处理
loading = new Ext.LoadMask(Ext.get(ddTree.getEl()), { msg: "请等待 " });
loading.show();
}

function loadHandler() { // 加载后事件响应处理
loading.hide();
}
});
-->
</script>

分析问题：
1、是否是xxx.ashx出现异常？
使用Firefox工作正常，所以排除，并且通过Firebug取到xxx.ashx输出json数据如下，所以该可能排除。
[{"id":59,"text":"web development","leaf":false,"children":[{"id":60,"text":"asp.net","leaf":false,"children":[]},{"id":61,"text":"php","leaf":false,"children":[]}]},{"id":62,"text":"web development","leaf":false,"children":[{"id":63,"text":"asp.net","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
<script language="JavaScript" type="text/javascript">
<!--
Ext.BLANK_IMAGE_URL = '../js/ext/images/default/s.gif';

Ext.onReady(function() {
var forumTree = new Ext.tree.TreePanel( {
el: 'forumtree',
useArrows: true,
enableDD: true,
width: 200,
height: 300,
rootVisible: false,
root: new Ext.tree.AsyncTreeNode({})
});

forumTree.render();

// 加载提示
var loading = null;

function showLoading() {
loading = new Ext.LoadMask(Ext.get(forumTree.getEl()), { msg: "请等待 " });
loading.show();
}

function hideLoading() {
loading.hide();
}

showLoading();

// 由于使用TreeLoader在IE下无法正常加载数据,所以使用Ajax先获取数据再填充数据到root node下
Ext.Ajax.request({
url: 'xxx.ashx',
success: function(request) {
var data = 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
function removeChildNodes(node) {
while(node.firstChild) {
removeChildNodes(node.firstChild);
}

if(node.getDepth() != "0") {
node.remove();
}
}