ツリーパネル[classic] (2)
今回はツリーグリッドを取り上げます。
基本的な使い方
Ext.tree.Panelクラスを使うと、ツリーパネルとグリッドパネルを一緒にしたようなツリーグリッドUIを利用できます。
基本的な使い方はツリーパネルと同じで、それに加えてExt.tree.Panelクラスのcolumnsコンフィグを指定するだけです。
columnsコンフィグは、ほぼExt.grid.Panelのcolumnsコンフィグと同じです。
ストアとモデルは前回と同じものを使用しました
Ext.define('Sample.view.sample.Panel', { extend: 'Ext.tree.Panel', xtype: 'sample_panel', requires: [ 'Ext.tree.Column', 'Ext.grid.column.Number' ], title: 'ツリーグリッド サンプル', store: 'Earnings', columnLines: true, rowLines: true, rootVisible: false, columns: [ { xtype: 'treecolumn', text: 'グループ', dataIndex: 'text', flex: 1 }, { xtype: 'numbercolumn', format: '0,000', dataIndex: 'quarter1', text: '第1四半期', width: 120, align: 'right' }, { xtype: 'numbercolumn', format: '0,000', dataIndex: 'quarter2', text: '第2四半期', width: 120, align: 'right' }, { xtype: 'numbercolumn', format: '0,000', dataIndex: 'quarter3', text: '第3四半期', width: 120, align: 'right' }, { xtype: 'numbercolumn', format: '0,000', dataIndex: 'quarter4', text: '第4四半期', width: 120, align: 'right' } ] });
編集
編集には、グリッドパネルと同じプラグインを使えます。
例えば、セル編集であれば下記のようになります。
Ext.define('Sample.view.sample.Panel', { extend: 'Ext.tree.Panel', xtype: 'sample_panel', requires: [ 'Ext.tree.Column', 'Ext.grid.column.Number', 'Ext.grid.plugin.CellEditing' ], title: 'ツリーグリッド サンプル', store: 'Earnings', columnLines: true, rowLines: true, rootVisible: false, columns: [ { xtype: 'treecolumn', text: 'グループ', dataIndex: 'text', flex: 1, editor: 'textfield' }, { xtype: 'numbercolumn', format: '0,000', dataIndex: 'quarter1', text: '第1四半期', width: 120, align: 'right', editor: 'numberfield' }, { xtype: 'numbercolumn', format: '0,000', dataIndex: 'quarter2', text: '第2四半期', width: 120, align: 'right', editor: 'numberfield' }, { xtype: 'numbercolumn', format: '0,000', dataIndex: 'quarter3', text: '第3四半期', width: 120, align: 'right', editor: 'numberfield' }, { xtype: 'numbercolumn', format: '0,000', dataIndex: 'quarter4', text: '第4四半期', width: 120, align: 'right', editor: 'numberfield' } ], plugins: { cellediting: true } });
ツリーパネルはちょっとクセがあって使いづらいですが、ツリーグリッドのUIは表現力が高いので、いろいろな場面で使いたくなりますね。