TreePanelの生成方法について

単純なツリーを生成する方法をまとめてみました。
サンプルと全体のソースはこちらから参照できます。

1. TreeNode指定で生成

Ext.tree.TreeNodeでノードを生成してツリーに追加していく方法です。ツリーを初期化した後、イベントでノードを追加していく際などに利用しそうな感じ。

var tree = new Ext.tree.TreePanel({
  el: 'tree',
  listeners: {
    'click': function(node){
      alert('id:' + node.id);
    }
  }
});

var root = new Ext.tree.TreeNode({
  id: 'rootNode',
  text: 'rootNode', 
  leaf: false
});

var child1 = new Ext.tree.TreeNode({
  id: 'childNode1',
  text: 'childNode1',
  leaf: false
});

var leaf1 = new Ext.tree.TreeNode({
  id: 'leaf1',
  text: 'leaf1',
  leaf: true
});

child1.appendChild(leaf1);
root.appendChild(child1);
tree.setRootNode(root);   

tree.render();

2. JSON（ローカル変数）指定で生成

rootノードを追加する際にJSON形式でチャイルドノードを指定して初期化できます。Ext.tree.AsyncTreeNodeを利用するみたいです。

var tree2 = new Ext.tree.TreePanel({
  el: 'tree2',
  listeners: {
    'click': function(node){
      alert('id:' + node.id);
    }
  }
});

var root = new Ext.tree.AsyncTreeNode({
  id: 'rootNode',
  text: 'rootNode', 
  children: [{
      id: 'childNode1',
      text: 'childNode1',
      children: [
          { id: 'leaf1-1', text: 'leaf1-1', leaf: true },
          { id: 'leaf1-2', text: 'leaf1-2', leaf: true }
      ]
    },{
      id: 'childNode2',
      text: 'childNode2',
      children: [
          { id: 'leaf2-1', text: 'leaf2-1', leaf: true },
          { id: 'leaf2-2', text: 'leaf2-2', leaf: true }
      ]
  }]
});
tree2.setRootNode(root);
 
tree2.render();

3. JSON（サーバから）指定で生成

サーバからJSONデータをロードして初期化する方法です。Ext.tree.TreeLoaderで取得先のURLを指定します。ノードがクリックされた際、そのノード名がPOSTパラメタ（node）としてget-json.phpに渡されます。

var tree3 = new Ext.tree.TreePanel({
  el: 'tree3',
  loader: new Ext.tree.TreeLoader({
      dataUrl:'get-json.php'
  }),
  listeners: {
    'click': function(node){
      alert('id:' + node.id);
    }
  }
});

var root = new Ext.tree.AsyncTreeNode({
  id: 'rootNode',
  text: 'rootNode'
});
tree3.setRootNode(root);
 
tree3.render();

4. XML（サーバから）指定で生成

サーバからXMLデータをロードして初期化する方法です。XMLを利用する場合はクラスを自前で作る必要がありますが、ExtJS付属サンプルのXmlTreeLoader.jsにExt.ux.XmlTreeLoaderというクラスがあるのでこれを利用すれば少し楽ができます。

Ext.ux.XmlTreeLoaderがXMLをパースしてくれるので、Ext.app.BookLoaderでどの情報をツリーに表示するかを定義しているだけです（ExtJSサンプルほぼそのままです）。attr.textがツリーに表示される文字列です。

Ext.app.BookLoader = Ext.extend(Ext.ux.XmlTreeLoader, {  
  processAttributes : function(attr){
      if(attr.first){
        attr.text = attr.first + ' ' + attr.last;
        attr.loaded = true;
      }else if(attr.title){
        attr.text = attr.title + ' (' + attr.published + ')';
        attr.leaf = true;
      }
  }
});

var tree4 = new Ext.tree.TreePanel({
  el: 'tree4',
  autoScroll: true,
  listeners: {
    'click': function(node){
      alert('id:' + node.id);
    }
  },
  root: new Ext.tree.AsyncTreeNode({
    id: 'rootNode',
    text: 'rootNode'
  }),
  loader: new Ext.app.BookLoader({
      dataUrl:'get-xml.php'
  })
});

tree4.render();

昔はツリーを作るだけで一苦労だったのにこんなに簡単にできるとは。。
CosmoDBとか大分前に作ったWebアプリをExtで作り直したいなと思う今日この頃です。