ExtJS 6 grid 表格中增加多选

最近在项目中用ExtJS grid制作表格，有需求要多选表格中的行，简单整理一下实现方式。

适用于ExtJS 6

示例表格代码：普通表格

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' },
        { name: 'Bart', email: '[email protected]', phone: '555-222-1234' },
        { name: 'Homer', email: '[email protected]', phone: '555-222-1244' },
        { name: 'Marge', email: '[email protected]', phone: '555-222-1254' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: store,
    width: 400,
    renderTo: Ext.getBody(),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    selModel: {
       type: 'spreadsheet'
    }
});

多选配置: 鼠标选中时同时按或或者苹果

selModel: {
    selType: 'rowmodel', // rowmodel is the default selection model
    mode: 'MULTI', // Allows selection of multiple rows
}

使用checkbox 多选

selModel: {
    checkboxSelect: true,
    type: 'spreadsheet'
}

使用checkbox 多选, 设置checkbox位置，checkboxColumnIndex默认是0

selModel: {
    checkboxSelect: true,
    checkboxColumnIndex: 1,
    type: 'spreadsheet'
}

参考官方文档：
https://docs.sencha.com/extjs/6.0.2/classic/Ext.grid.selection.SpreadsheetModel.html