[ExtJS] JsonStore から TreeNode を生成

ExtJSで、Ajax通信(JSON)しながらツリーを生成するにはAsyncTreeNodeを使うのが標準ですが、これが受け取るJSONのフォーマットが決められていて使いづらい。
調べてみたところ、AsyncTreeNodeを使わず、JsonStore からTreeNodeを生成する簡単な方法を見つけました。これとRailsのExtJSプラグイン (ext_scaffold) が提供する to_ext_json メソッドを使えば、ツリーが簡単に作れます。

やることは２つ。

• TreeNodeを拡張して、Record オブジェクトを受け取ってノードを生成するメソッドを追加
• JsonStore に load イベントリスナーを追加、または load メソッドにコールバック関数を渡して、レコードを読み取るごとに (TreeNodeに追加した) ノード生成メソッドを呼ぶ

わかりやすいです。

コードはこんな感じで。

# TreeNode拡張クラス

Ext.extend(Ext.ccm.VoaTreeNode, Ext.tree.TreeNode,{
  appendVoaItem: function(record, id) {
      var item = new Ext.tree.TreeNode({
          id: id,
          text: record.get('voa_item').title + ' (' + record.get('voa_item').pubdate + ')',
          leaf: true
      });
      this.appendChild(item);
  }
});

# JsonStore の load 時の処理 (コールバック方式)

n.voaItemStore.load({
  callback: function(recs, opt, success){
    for(i = 0; i < recs.length; i++) {
      this.voaTreeNode.appendVoaItem(recs[i],i);
  }
}});

JsonStore方式でなく、任意のJSONを受け取るようにするためには、AsyncTreeNode のコア部分までいじらないといけないようです(Web上にいくつか情報あり)。とりあえず私はJsonStoreが使えれば十分です。