初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

グリッドの機能:選択方法(セレクションモデル)[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
            }
        }
    ]
});

f:id:sham-memo:20170209225827p:plain

セレクションモデルをExt.grid.selection.SpreadsheetModelにすると、スプレッドシート形式になります。

columnSelectをtrueにすると、ヘッダーをクリックすることで列の一括選択ができます。

さらにExt.grid.plugin.Clipboardプラグインを組み込むことで、Ctrl+C、Ctrl+Vでコピー&ペーストできるようになります。

あとは編集もプラグインで通常通りにできます。

(´-`).。oO(さて、どういう場面で使うのだろうか…)