Sencha Advent Calendar 2014 23日目
http://www.adventar.org/calendars/490
スプレッドシード セレクション モデル
こんにちはxenophyの菅井です。
先日Ext JS 5.1リリースされました。
いくつか新しい機能が追加されましたが、今回はその中で
グリッドをスプレッドシートのように操作できるようになる
スプレッドシード セレクション モデルを使ってみたいと思います。
グリッドの作成
スプレッドシード セレクション モデルはグリッドのselModelに設定する形で利用します。
なのでまずはベースとなるグリッドを以下のように作成します。
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
title: 'スプレッドシート',
width: 250,
columns: [
{text: 'A', dataIndex: 'a', width: 50},
{text: 'B', dataIndex: 'b', width: 50},
{text: 'C', dataIndex: 'c', width: 50},
{text: 'D', dataIndex: 'd', width: 50},
{text: 'E', dataIndex: 'e', width: 50}
],
store: {
fields: [{
name: 'a',
type: 'string'
}, {
name: 'b',
type: 'string'
}, {
name: 'c',
type: 'string'
}],
data: [
{a: 'A-1', b: 'B-1', c: 'C-1', d: 'D-1', e: 'E-1'},
{a: 'A-2', b: 'B-2', c: 'C-2', d: 'D-2', e: 'E-2'},
{a: 'A-3', b: 'B-3', c: 'C-3', d: 'D-3', e: 'E-3'},
{a: 'A-4', b: 'B-4', c: 'C-4', d: 'D-4', e: 'E-4'},
{a: 'A-5', b: 'B-5', c: 'C-5', d: 'D-5', e: 'E-5'}
]
}
});
この時点ではまだ普通のグリッドなのでデフォルトの行選択になっています。
スプレッドシード セレクション モデルの設定
では次に作成したグリッドに対してスプレッドシード セレクション モデルの設定を追加します。
以下のようにrequiresでSpreadsheetModelクラスを利用できるようにして
selModelのtypeに'spreadsheet'を指定しています。
さらに列ごとの選択も可能となるようcolumnSelectをtrueにしています。
requires: [
'Ext.grid.selection.SpreadsheetModel'
],
selModel: {
type: 'spreadsheet',
columnSelect: true
},
上記の設定だけで列や行を横断してスプレッドシートのように
カラムを選択することができるようになりました。
クリップボード プラグイン
スプレッドシード セレクション モデルを設定したグリッドに対して
クリップボード プラグインを利用するとグリッドで選択したセルを
簡単にクリップボードに保存できるようになります。
以下のようにrequiresとpluginsを追加します。
requires: [
'Ext.grid.selection.SpreadsheetModel',
'Ext.grid.plugin.Clipboard'
],
selModel: {
type: 'spreadsheet',
columnSelect: true
},
plugins: 'clipboard',
先ほどのグリッドのセルを選択してコピペしてみた結果が以下になります。
貼り付け結果
A-2 B-2 C-2 D-2
A-3 B-3 C-3 D-3
A-4 B-4 C-4 D-4
最後に
今まで苦労して実装してきた機能がExt JS 5になって次々と追加されていっているので
今回のようなスプレッドシード セレクション モデルとクリップボード プラグイン等で
よりExt JSのデスクトップアプリケーションでの有用性が高まったと思います。
※今回のSencha Fiddle です。
https://fiddle.sencha.com/#fiddle/ffo
明日は@martini3ozさんです。