ExtJS 7.4 Modern版本表格开启多选后如何获取全部选中行数据

核心原因说明 #

你遇到的getSelection()仅返回单行的问题，根源是Ext JS Modern版Grid的selectable配置默认是单选模式，哪怕开启了checkbox选择框，默认也不会自动开启多选能力，这一点和Classic版逻辑不同。同时Modern版确实已经移除了getSelectionModel()相关API，不需要再使用该方法获取选中数据。

第一步：修正Grid的selectable配置 #

在现有selectable配置中新增mode: 'multi'开启多行选中，修正后的完整配置如下：

Ext.define("app.view.grid.MyGrid", {
  extend: "Ext.grid.Grid",
  xtype: "app.MyGrid",

  viewModel: "Grid",

  selectable: {
    rows: true,
    checkbox: true,
    // 新增这行配置开启多选模式
    mode: 'multi'
  },
});

第二步：获取所有选中行数据 #

配置生效后，直接调用Grid实例的getSelection()方法即可返回所有选中行的Record对象数组：

// 这里的grid是你获取到的Grid组件实例
const selectedRecords = grid.getSelection();

// 遍历获取每行原始数据的示例
selectedRecords.forEach(record => {
  console.log('行数据：', record.getData());
});

补充：实时监听选中变化 #

如果需要在选中/取消选中时实时获取选中数据，可以给Grid添加selectionchange事件监听：

Ext.define("app.view.grid.MyGrid", {
  extend: "Ext.grid.Grid",
  xtype: "app.MyGrid",
  // 其他配置省略
  listeners: {
    selectionchange: function(grid, selectedRecords) {
      // selectedRecords就是当前所有选中的行数组
      console.log('当前选中行数：', selectedRecords.length);
    }
  }
});

内容的提问来源于stack exchange，提问作者RynnHeldeD