读书人

ExtJs TreePanel使用TreeLoader在IE下

发布时间: 2012-06-28 15:20:04 作者: rapoo

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传入该方法就可以了。

读书人网 >JavaScript

热点推荐