ExtJs 4 で TreeGrid を構築しようとしています。大きなオブジェクトを返すサーブレットがあり、この JSON データを個別のツリーに分割し、それらを異なる Ext.Tree.Panels に表示したいと考えています。論理的には1つのオブジェクトであるため、サーバー側で各ツリーのデータを取得するために複数のクエリを使用したくありません。オブジェはこんな感じ。
root : {
...
some_meta_data_fields here..
..
tree1 :{
a : {
data:..
children: [..]
},
b : {
data:..
children: [..]
}
...more childs here...
},
tree2 : {
..another tree...
}
}
したがって、tree1 は 1 つの Tree.Panel 用であり、tree2 は別の Tree.Panel 用であり、サーバーとのすべての同期は集中化する必要があります。
Ext.Ajax(..) のようなサーバーからデータを取得し、次のような別のルート パラメータを持つ別の Tree.Store を作成しました。
var store = Ext.create('Ext.data.TreeStore', {
model: 'model',
root : root.tree1,
proxy : {
type: 'memory',
....JSON reader and other.
}
}
});
しかし、そのようなストアの読み込みが元のオブジェクトを変換する場合 (たとえば、リーフを切り離す)、これは受け入れられません。次のようにツリーストアを手動で埋める必要があると思います:
var store = Ext.create('Ext.data.TreeStore', {
root : {name: "proxyRoot"},
model: 'model',
load : function(node){
var that = this;
Ext.each(a.children, function(child, index) {
var node = that.getRootNode().appendChild({
name : child.name,
val : child.val
});
Ext.each(node.children, function(leaf, index) {
node.appendChild({
name : leaf.name,
val : leaf.val
});
})
});
console.log(that);
}
});
ツリーがロードされた後、展開できないルートのみが表示されますが、コンソールでは、データが正しくロードされ、ExtJs ストア オブジェクトに必要な階層があることがわかります。私は本当にこの問題に悩まされていますが、ツリーごとに異なるクエリを作成することはまったく受け入れられません。誰かが私に解決策を教えてくれたらとてもうれしいです。ありがとう。