Edited at

Sencha Ext JS 5 のスプレッドシード

More than 3 years have passed since last update.

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'}
]
}
});

grid

この時点ではまだ普通のグリッドなのでデフォルトの行選択になっています。


スプレッドシード セレクション モデルの設定

では次に作成したグリッドに対してスプレッドシード セレクション モデルの設定を追加します。

以下のようにrequiresSpreadsheetModelクラスを利用できるようにして

selModeltypeに'spreadsheet'を指定しています。

さらに列ごとの選択も可能となるようcolumnSelectをtrueにしています。

    requires: [

'Ext.grid.selection.SpreadsheetModel'
],
selModel: {
type: 'spreadsheet',
columnSelect: true
},

ss1

ss2

上記の設定だけで列や行を横断してスプレッドシートのように

カラムを選択することができるようになりました。


クリップボード プラグイン

スプレッドシード セレクション モデルを設定したグリッドに対して

クリップボード プラグインを利用するとグリッドで選択したセルを

簡単にクリップボードに保存できるようになります。

以下のようにrequirespluginsを追加します。

    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さんです。