最近在项目中用ExtJS grid制作表格，有需求要多选表格中的行，简单整理一下实现方式。
适用于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'
}
});
多选配置: 鼠标选中时同时按<Shift>或<control>或者苹果<command>
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
