(ExtJS6.5)グリッドの新機能[modern] (1) - 初心者のためのExtJS入門

ExtJS6.5でmodernのグリッドにいくつか変更箇所があります。

今回は選択と編集を試してみました。

選択

Ext.grid.Gridのselectableコンフィグを使って、どういう選択を可能にするかを設定できるようになりました。

items: [{
    xtype: 'grid',

    selectable: {
        checkbox: true,
        cells: true
    }
}]

プラグインで指定していた以前より、可読性が良くなりました。

ドキュメントを見る限り8つの項目を指定できるようです。

- mode `'single'`, `'multi'` Allow selection of only a single or multiple *records*. This is only valid when selecting rows.
- deselectable Configure as false to disallow deselecting down to zero selected *records*. This is only valid when selecting rows.
- drag `true` or `false` to allow drag gestures to swipt a rage of cells or rows.
- columns `true` to enable column selection by clicking on headers. Defaults to `false`
- cells `true` to enable cell selection by clicking or dragging on cells. Defaults to `false`
- rows Set to `false` to disable selecting rows. Defaults to `true`
- checkbox `true` to add a checkbox column to display selected state. `'only'` to indicate that only clicks on the checkbox affect row selected state.
- extensible `true` to enable the selection to be extended either in the `X` or `Y` axis or `'x'` or `'y'` to configure

グリッドの場合は、Ext.grid.selection.Model(http://docs.sencha.com/extjs/6.5.0/modern/Ext.grid.selection.Model.html)というセレクションモデルのクラスを使っているようで、このクラスのコンフィグとして渡してくれるみたいです。

編集

Ext.grid.plugin.CellEditingプラグインクラスを使って、セル単位で編集できるようになりました。classicでは当たり前にできていましたが、modernでは新規です。

これまでの編集は、行を選択すると、編集フォームが画面外からスライドイン表示され、そこで編集作業を行うという流れでした。

しかし、PCで扱う場合は直接編集できたほうが操作感が良いため、PC向けに作成されたようです。

このことから、最終的にはPC・モバイルともにmodernにまとめたいという意思を感じます。

PC向けの場合は新しく追加されたプラグインを、モバイル向けの場合はこれまでのUIを使いたい場合は、platformConfigで設定するコンフィグを切り替えできるようです。

items: [{
    xtype: 'grid',

    platformConfig: {

        desktop: {
            plugins: {
                gridcellediting: true
            }
        },

        '!desktop': {
            plugins: {
                grideditable: true
            }
        }
    },
    ...]
}]