ExtJs TreePanel使用TreeLoader在IE下无法正常加载显示的解决方法

小菜使用如下代码生成TreePanel，代码与ExtJs自带的examples类似，在Firefox下运行正常，不过在IE下无法正常显示。

<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了。试下。

<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。这个方法不存在。简单我们自己来一个。

function removeChildNodes(node) {
            while(node.firstChild) {
                removeChildNodes(node.firstChild);
            }
  
            if(node.getDepth() != "0") {
                node.remove();
            }
        }

在刷新的时候只要把forumTree.root传入该方法就可以了。