Ext.grid.PanelとExt.tree.Panelの違いについて
「一覧と詳細」の組合せは情報の管理の仕方の定石ですが、一覧の見せ方で困ってます。
この1週間、表題の通り２つのコンポーネントについて色々調べたり試したりしてましたが、
混乱しそうになってきたのでちょっとまとめてみます。
（最終的にこのエントリ埋められるんだろうか。。）
組合せ
比較、検討対象は、「Ext.grid.Panel ＋ Ext.data.Store」の組合せと、
「Ext.tree.Panel ＋ Ext.data.TreeStore」の組合せの２つです。
表にするとこんな感じです。
| Ext.*.Panel | Ext.data.*Store | |
| グリッドの組合せ | Ext.grid.Panel | Ext.data.Store |
| ツリーの組合せ | Ext.tree.Panel | Ext.data.TreeStore |
「一覧」で実装したい機能。
次に、実装したい機能を挙げてみます。
- フィルタ機能
- ソート機能
- グループ化機能
- 列並び替え機能
これらの機能と前述の「組合せ」のマッピングを整理します。
| Ext.grid.Panel | Ext.data.Store | Ext.tree.Panel | Ext.data.TreeStore | |
| フィルタ機能 | (担当外) | filterByメソッドで任意のフィルタ関数を設定可能（確認済） | (担当外) | TreeStoreにはfilterByメソッドがない模様。でここに自前でfilterBy等の関連メソッドを定義する方法発見。（動作は未確認） |
| ソート機能 | (担当外) | sortメソッドに列、及び昇順・降順を設定可能（確認済） | (担当外) | sortメソッドに列、及び昇順・降順を設定可能（確認済） |
| グループ機能 | 1段階のグループ化は簡単に実装可能。が、２つ以上のネスト関係にあるグループを定義することは不可能（確認済） | (担当外) | コンポーネントの構造上、多段ネストの「グループ的」な表現が可能。（確認済） | (担当外) |
| 列並び替え機能 | columnsプロパティの設定を切り替えることで動的な切り替えが可能（確認済） | (担当外) | columnsプロパティの設定を切り替えることで動的な切り替えが可能（確認済） | (担当外) |
では各論へ。
フィルタ機能
フィルタ機能はPanelではなく、Store側が持つ機能です。
Ext.grid.Panelが内部に持つExt.data.Storeには、動的にフィルタを切り替える為のfilterByメソッドが存在するため問題なく実装可能でした。
Ext.tree.Panelが内部に持つExt.data.TreeStoreには、filterByに相当するメソッドは見つかりませんでした。
で、ここに、自前でExt.data.TreeStoreを継承したクラスを実装し、filterBy等の関連メソッドを実装する手法が記載されています。
が、ExtJS 4.0.2aではノードのコピー処理でバグがあるらしく、そっちもちょっと修正しないとダメなようです。
ちなみに一連の記事は実装して試してませんw
ソート機能
Store、TreeStoreともにsortメソッドが存在するため、特に問題なく実装可能でした。
グループ機能
gridパネルには簡単に実装可能なグループ化機能がありますが、こちらは1階層しかグループ化できません。
treeパネルにはそもそもグループ化の概念がありませんが、ツリー構造をそのままグループと見立てて表現することが可能です。
コンポーネントの構造上、多段ネストのグループを表現することが可能です。
しかし、これもまた一長一短で、treeパネルの場合、バインドするデータ構造そのものをツリー状に表示するため、
表示に適したデータをサーバ側から受け取る必要が発生します。
これをデータとビューの疎結合ができなくなるとみなすか、
それとも受け取ったデータをそのまま表示可能な汎用treeパネルとみなすか、
少し考える必要がでてきそうです。
Storeは確認しましたが、TreeStoreは確認してません。
追記（2011/10/23）
treeの方に大きな問題があることに気がつきました。
「ツリーで表現できる列」と「通常の列」は完全に別の列であるため、
ネストしたグループとして表現したくとも２階層目以下のグループに別の種類の列のラベル文字列を表示できないということです。
なので、treeを多段ネストされたグループとして表現するために使用するのはちょっと無理っぽいですね。。
列並び替え機能
両者ともパネル側で指定することになりそうです。
プロパティにcolumnsが存在するので、これに表示したい列を設定することになりそうです。
結論
現段階で不明、未確認の項目が判明したので、実際にコードを書いてみてそれらを潰していきます。
gridパネルは静的データファイルを使って色々試すことができましたが、treeパネルの方は、サーバ側の実装が必要になりそうですねぇ。。
追記（2011/10/23）
結局、treeの方が今自分が実現したい用途では使えなさそうなので、gridの方を機能拡張できないかExtJSのコードの解析をしてみました。
が、経験値が足りないせいか根性が足りないせいか自分では分かりませんでした。。無念です。（とはいえ、かなり勉強になりました。）
ひとまずグループの多段ネストはお預けにしておき、サーバサイドの勉強に入りたいと思います。
さぁ！NextJSだっ！！
