Advent Calender初投稿です、佐藤です。
北海道はすっかり道路のコンクリートも隠れてしまい、真っ白になってしまいました。長い冬の始まりです。

ExtJS5で新しい機能が追加されましたが今回は、その中の１つであるTreePanelの新機能について紹介したいと思います。

ご存知の通りTreePanelは、ツリー構造のUIを提供するコンポーネントです。TreePanelのメリットは親と子の関係を明確にした表現が出来るという事と、データを階層として表現できるという点です。
更にツリーパネルは、グリッドパネルと同じコンポーネントクラスであるため、gridに備わっている拡張機能、およびプラグインをツリーパネルでも使用することもできます。
ExtJS5ではTreePanelにマルチカラムという機能が追加されgridPanelのように複数のカラムを設定する事が
出来る様になりました。
個人的にはこのマルチカラムはuiの幅が広がるので使えそうな機能だなと思ってます。

マルチカラム

このマルチカラムを応用することで、treeの各ノードに対する説明や、コンポーネントを定義する事が可能になります。マルチカラムを実装するためにはgridPanelのColumnsを定義するようにTreePanelに複数のColumnsを定義します。では、早速試してみたいと思います。

 Ext.create('Ext.tree.Panel', {
    renderTo: Ext.getBody(),
    title: 'multiColumn',
    width: 300,
    height: 400,
    fields: ['eat', 'details'],
    columns: [{
        xtype: 'treecolumn',
        text: '食べ物',
        dataIndex: 'eat',
        width: 150,
        sortable: true
    }, {
        text: '詳細',
        dataIndex: 'details',
        flex: 1,
        sortable: true
    }],
    root: {
        eat: '食べ物',
        details: '食べ物の分類',
        expanded: true,
        children: [{
            eat: '肉',
            details: '部位',
            leaf: false,
            children: [{
                eat: '牛肉',
                details: 'カルビ',
                leaf: true,
                expanded: true
            }]
        }, {
            eat: '野菜',
            details: '種類',
            leaf: true
        }]
    }
});

まず、fieldsオブジェクトにはstoreで定義するように表示するデータの項目を記載します。
次に、columnsオブジェクトに表示するカラムのdataIndexやタイトルなどの詳細を定義します。
ここで一つ注意です。treepanelにマルチカラムを定義する際には、必ず「xtype:'treecolumn'」を1つは定義しなければいけません。gridPanelのColumnsではそのような事はありませんでしたが、TreePanelではツリーとなる列を必須とするため定義する必要があります。
後は、rootオブジェクトにノードのデータを設定するだけです。それぞれのノードにfieldsで定義した項目に設定するデータを定義しマッピングさせます。では、実際に画面を表示させてみて下さい。
下記の様なサンプルの様にtreeに対して説明の項目が表示される筈です。

これが複数のカラムを定義するTreePanelの実装です。サンプルでは2項目ですが、カラムを定義することで沢山の項目を表示させることも可能になります。
また、ExtJS４にもありますが、プロパティを設定することでuiの表示を簡単に変えたり、動きのカスタマイズをさせる事もできます。

ノード操作

冒頭のマルチカラムのサンプルコードでも「rootVisible: false」など、いくつかのプロパティを設定してます。
この「rootVisible」はルートノードの表示有無を設定するプロパティです。
この様なノードの設定を可能にしているクラスが「Ext.data.NodeInterface」です。
名前の通りこのクラスはノードのインターフェースであり、ノードのプロパティなどを提供しています。
ここではいくつかのプロパティを設定して表示が変わる事の確認をしてみます。

 Ext.create('Ext.tree.Panel', {
    renderTo: Ext.getBody(),
    title: 'multiColumn',
    width: 300,
    height: 150,
    fields: ['eat', 'details'],
    useArrows:true,
    rootVisible:false,
    ...省略
    root: {
      ...
    }
});

冒頭のサンプルコードに「useArrows:true」、「rootVisible:false」を設定してみます。
実際にこのプロパティを設定し表示を確認してみて下さい。変更前とレイアウトが異なる事が分かります。
前者では、ノードを展開したり折りたたんだりするアイコンは「-」が表示されていますが、今回「useArrows:true」を設定することでアイコンが矢印に変更されました。また、「rootVisible:false」を設定した事で、一番最上位であるルートの「食べ物」が非表示になります。
この様に、プロパティを設定するだけで簡単に視覚的な表示を変更させる事ができます。
これ以外にも沢山のプロパティが設定可能なので下記APIドキュメントを参考に試してみて下さい。

Sencha Fiddleを使ってコードを記載するのも良いですが、APIドキュメント内にもCode Editorにコードを記載して表示させる事もできるので、プロパティの設定による表示などの確認であればそれでさくっと試してみるのがいいかと思います。

TreePanelのマルチカラムなどもっと個人的に試してみたいと思ってるので、プラグインの利用や使えるuiなどの情報を次回の投稿にでも提供できたらと思います。

以上、佐藤でした。