グリッドの機能：選択方法(セレクションモデル)[classic] (1)

Ext.grid.PanelのselModelコンフィグを指定すると、グリッドの行選択方法を変更できます。

ここにはセレクションモデル(Ext.selectionにあるクラス)を指定でき、主に下記３種類を使うと思います。

• セル選択(Ext.selection.CellModel)
• 行選択(Ext.selection.RowModel)
• チェックボックス選択(Ext.selection.CheckboxModel)

selModelは↓のように指定します。

selModel: 'cellmodel'

selModel: {
  type: 'cellmodel',
  allowDeselect: true
}

selModel: Ext.create('Ext.selection.CellModel')

チェックボックス選択を試してみます。

/**
 * メモ一覧グリッドクラス。
 *
 * @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.column.Date',
        'Ext.selection.CheckboxModel'
    ],

    store: 'Memo',

    selModel: {
        type: 'checkboxmodel',
        ignoreRightMouseSelection: true,  // マウスの右クリック選択を禁止
        checkOnly: true  // チェックボックスのクリックだけで選択を有効にする
    },

    columns: [
        {
            dataIndex: 'id',
            text: 'ID',
            align: 'right',
            locked: true
        },
        {
            dataIndex: 'title',
            text: 'タイトル',
            width: 250
        },
        {
            dataIndex: 'body',
            text: '本文',
            flex: 1
        },
        {
            xtype: 'datecolumn',
            format: 'Y/m/d H:i:s',
            dataIndex: 'created',
            text: '登録日時',
            width: 200
        }
    ]
});

セレクションモデルの参照

現在選択している行や最後に選択した行など、グリッドの選択に関する情報はセレクションモデルから取得します。

セレクションモデルはgetSelectionModelメソッドで取得できます。

var grid = this.lookupRefreence('grid');

var selModel = grid.getSelectionModel();

// 選択行のモデル
var records = selModel.getSelection();

// 現在の選択件数
var count = selModel.getCount();

// 全選択
selModel.selectAll();

// 全選択解除
selModel.deselectAll();

特定データを選択できないようにする

beforeselectイベント時にイベントハンドラでfalseを返すと選択を中断できます。

/**
 * メモ一覧グリッドクラス。
 *
 * @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.column.Date',
        'Ext.selection.CellModel'
    ],

    store: 'Memo',

    selModel: 'cellmodel',

    columns: [
        {
            dataIndex: 'id',
            text: 'ID',
            align: 'right',
            locked: true
        },
        {
            dataIndex: 'title',
            text: 'タイトル',
            width: 250
        },
        {
            dataIndex: 'body',
            text: '本文',
            flex: 1
        },
        {
            xtype: 'datecolumn',
            format: 'Y/m/d H:i:s',
            dataIndex: 'created',
            text: '登録日時',
            width: 200
        }
    ],

    listeners: {
        beforeselect: function (selModel, record, row, col) {
            var position = selModel.getPosition();

            if (position.column.dataIndex === 'id') {
                // ID列は選択不可
                return false;
            }

        }
    }

});

colの値で判定しても良さそうですが、列をロックしている場合は注意が必要です。

ID列とタイトル列のセルを選択した場合、どちらもcolは0になるためです。

確実に列の情報を見るためには、セレクションモデルのgetPositionメソッドから選択している列情報を取得し、その内容を使って判定する必要があります。