最近在項(xiàng)目中用ExtJS grid制作表格，有需求要多選表格中的行，簡(jiǎn)單整理一下實(shí)現(xiàn)方式。

適用于ExtJS 6

示例表格代碼：普通表格

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', 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'
    }
});

多選配置: 鼠標(biāo)選中時(shí)同時(shí)按<Shift>或<control>或者蘋(píng)果<command>

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

使用checkbox 多選

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

使用checkbox 多選, 設(shè)置checkbox位置，checkboxColumnIndex默認(rèn)是0

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

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