ExtJs TreePanel TreeLoaderを使用してIEで表示を正常にロードできない解決方法

5109 ワード

おかずは以下のコードを使用して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というツリーノードがサーバにコミットされた後、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をこのメソッドに転送すればよい.