javascript - ExtJS TreePanel から JSON データを取得する

Question

Ext.tree.TreePanel オブジェクトがあり、外部ファイルからロードされたデータがあるとしましょう。例:

var tree = new Ext.tree.TreePanel({
    ...
    loader: new Ext.tree.TreeLoader({
        dataUrl:'./some_file.json'
    }),
    ...
});

このファイルは、ツリーを定義するオブジェクトの配列です。

ユーザーが新しいノードをツリーに追加し、いくつかのノードを移動するとします。次にユーザーがツリーをロードするときに使用できるように、ツリーから JSON データを取得する方法はありますか?

EDIT（コードソリューション）：

これは、Juan の回答からのアイデアに基づく解決策です。将来誰かがこのスレッドを見つけてコードを探している場合に備えて、これを掲載しています。

function getNodeList(bfsQueue) {
    var node = bfsQueue.pop();
    var nodeQueue = [];

    for (var ii = 0; ii < node.childNodes.length; ii++) {
        bfsQueue.push( node.childNodes[ii] );
        nodeQueue.push( node.childNodes[ii] );
    }
    if (bfsQueue.length === 0) {
        return nodeQueue;
    } else {
        return nodeQueue.concat( getNodeList(bfsQueue) );
    }
}

var startQueue = [];
var nodeList = [];

startQueue.push( tree.getRootNode() );
nodeList.push( tree.getRootNode() );
nodeList = nodeList.concat(getNodeList( startQueue ));
console.dir(nodeList);

for ( var nn = nodeList.length-1; nn >= 0; nn-- ) {

    var params = [];
    for (var pp in nodeList[nn].attributes) {
        if (pp === "children" || pp === "loader") {continue;}
        params.push('"' + pp + '":' + JSON.stringify(nodeList[nn].attributes[pp]) + '');
    }

    if ( nodeList[nn].childNodes.length > 0) {
        var childList = [];

        for (var ii = 0; ii < nodeList[nn].childNodes.length; ii++) {
            childList.push( nodeList[nn].childNodes[ii].json );
        }

        params.push('"children": [' + childList.join(',') + ']');
    }

    nodeList[nn].json = "{" + params.join(",") + "}";
}

console.log(nodeList[0].json); // root node

Answer 1

まず、本当に必要なのは属性プロパティです。これは、ノードの作成に使用される JSON です。ほとんどの関連プロパティは更新されますが、childNodes は更新されません。そのため、それを元に戻すために何かを書く必要があります。

childNodes を使用してツリーをトラバースすると、すべてのノードを取得できます。それらを 1 つの json に再構築する必要があります。

Ext.data.Node.prototype.getJson = function () {
      // Should deep copy so we don't affect the tree
      var json = this.attributes;

      json.children = [];
      for (var i=0; i < node.childNodes.length; i++) {
          json.children.push( node.childNodes[i].getJson() )
      }
      return json;
}

tree.getRootNode().getJson();

この例は完璧ではありませんが、始めるには十分なはずです。

アップデート

Ext-JS 4.0 では、ノードはRecordsに装飾されています。したがって、余分なプロパティはすべて、レコード/モデル インターフェイスを介して文書化し、メソッドgetとsetメソッドを使用してセットを取得する必要があります。

Answer 2

var root = TreePanel.getRootNode();
var res = root.serialize();
console.log(res)