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