グリッドの機能:選択方法(セレクションモデル)[classic] (2)
Ext.grid.selection.SpreadsheetModelでExcelっぽい感じにできるので、今回はこれを試してみました(一度も使ったことがなかったので、ただの好奇心です)。
/** * メモ一覧グリッドクラス。 * * @class Memo.view.list.Grid * @extend Ext.grid.Panel */ Ext.define('Memo.view.list.Grid', { extend: 'Ext.grid.Panel', xtype: 'list_grid', requires: [ 'Ext.grid.selection.SpreadsheetModel', 'Ext.grid.plugin.CellEditing', 'Ext.grid.plugin.Clipboard' ], store: 'Memo', columnLines: true, selModel: { type: 'spreadsheet', columnSelect: true }, plugins: [ { ptype: 'cellediting' }, { ptype: 'clipboard' } ], columns: [ { dataIndex: 'title', text: 'タイトル', editor: 'textfield', width: 250, renderer: function (value) { return Ext.String.htmlEncode(value); } }, { dataIndex: 'body', text: '本文', editor: 'textarea', flex: 1, renderer: function (value) { value = Ext.String.htmlEncode(value); return value.replace(/\r?\n/g, '<br/>'); } }, { xtype: 'datecolumn', format: 'Y/m/d H:i:s', dataIndex: 'created', text: '登録日時', width: 200, editor: { xtype: 'datefield', format: 'Y/m/d H:i:s', hideTrigger: true } } ] });
セレクションモデルをExt.grid.selection.SpreadsheetModelにすると、スプレッドシート形式になります。
columnSelectをtrueにすると、ヘッダーをクリックすることで列の一括選択ができます。
さらにExt.grid.plugin.Clipboardプラグインを組み込むことで、Ctrl+C、Ctrl+Vでコピー&ペーストできるようになります。
あとは編集もプラグインで通常通りにできます。
(´-`).。oO(さて、どういう場面で使うのだろうか…)