ツリーパネル[modern]
今回はmodernのツリーパネルです。
できることはclassicのツリーパネルとほぼ同じです。
基本的な使い方
モデルとストアはclassicのときと同じものを使っています。
ビューにはExt.grid.TreeとExt.list.Treeを使えます。
ビュー
まずはExt.grid.Treeを使った場合です。
Ext.define('Sample.view.sample.Panel', { extend: 'Ext.grid.Tree', xtype: 'sample_panel', store: 'Earnings', rootVisible: false });
次にExt.list.Treeを使った場合です。
Ext.define('Sample.view.sample.Panel', { extend: 'Ext.list.Tree', xtype: 'sample_panel', store: 'Earnings', ui: 'nav', expanderFirst: false });
Ext.list.Treeはuiが少し用意されてるみたいです。expanderFirstコンフィグはExt.grid.Treeでも使えます。
Ext.list.TreeはExt.Gadgetを継承しているみたいで、Ext.grid.Treeとは根本的に違うようです。
編集などの機能はExt.grid.Treeでしか実装できません。
スマフォサイズで単純なツリーパネルを使う場合、expanderFirst: falseのほうが個人的に好きなUIです。
ツリーグリッド
最後に、ツリーグリッドにしてさらに編集可能にしてみました。
Ext.define('Sample.view.sample.Panel', { extend: 'Ext.grid.Tree', xtype: 'sample_panel', requires: [ 'Ext.grid.column.Tree', 'Ext.grid.column.Number', 'Ext.grid.plugin.CellEditing' ], store: 'Earnings', rootVisible: false, rowLines: true, columnLines: true, columns: [ { text: 'グループ名', xtype: 'treecolumn', width: 300, flex: 1, dataIndex: 'text', editable: true }, { text: '第1四半期', xtype: 'numbercolumn', format: '0,000', dataIndex: 'quarter1', align: 'right', editable: true }, { text: '第2四半期', xtype: 'numbercolumn', format: '0,000', dataIndex: 'quarter2', align: 'right', editable: true }, { text: '第3四半期', xtype: 'numbercolumn', format: '0,000', dataIndex: 'quarter3', align: 'right', editable: true }, { text: '第4四半期', xtype: 'numbercolumn', format: '0,000', dataIndex: 'quarter4', align: 'right', editable: true } ], plugins: { gridcellediting: true } });
ドラッグ&ドロップで入れ替えてみようと思いましたが、API見ても分かりませんでした。
知ってる人がいたらぜひ教えてください( )