ExtJs TreePanel TreeLoaderを使用してIEで表示を正常にロードできない解決方法
5109 ワード
おかずは以下のコードを使用してTreePanelを生成し、コードはExtJsが持参したexamplesと類似しており、Firefoxでは正常に動作するが、IEでは正常に表示できない.
問題の分析:
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になります.やってみる.
問題が解決する...
しかし、CRUDというツリーノードがサーバにコミットされた後、Treeをどのようにリフレッシュするかという問題に直面します.Ajaxを再起動するだけであれば.重複するノードが表示されます.
rootの下でappendChildで実現しているからです.したがって、リフレッシュ時にrootの下のすべてのサブノードを削除する必要があります.どうやって削除しますか?
forumTree.root.removeChildNodes()?ああ、sorry.この方法は存在しない.簡単に自分で一つください.
リフレッシュ時にforumTree.rootをこのメソッドに転送すればよい.
<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をこのメソッドに転送すればよい.