ExtJS 6.5.3中Ext.dataview.List的deselect方法缺失问题求助

我之前帮同事处理过同款ExtJS版本迁移的坑，太懂你现在的崩溃了——从6.0.1升级到6.5.3后，原来直接在Ext.dataview.List上调用的deselect()方法突然找不到，导致所有依赖这个方法的列表直接罢工。

问题根源 #

其实是ExtJS 6.5.x版本对数据视图的选择逻辑做了重构：官方把原本挂载在List组件上的选择相关方法，全部迁移到了**选择模型（SelectionModel）**中，List本身不再直接提供deselect()这类方法了。

具体解决方案 #

你只需要调整调用方式，通过List的选择模型来执行取消选择操作，分两步走：

1. 获取List的选择模型实例

先通过List组件的getSelectionModel()方法拿到对应的选择模型对象：

// 方式1：通过组件ID获取List
const myList = Ext.getCmp('your-target-list-id');
// 方式2：通过组件引用获取（推荐，比ID更可靠）
// const myList = this.lookupReference('your-list-reference');

// 获取选择模型
const selectionModel = myList.getSelectionModel();

2. 调用选择模型的取消选择方法

选择模型提供了更灵活的取消选择API，根据你的业务需求选对应的：

• 取消所有选中项：用deselectAll()

  selectionModel.deselectAll();
  

• 取消选中指定单条/多条记录：用deselect()（注意这是选择模型的方法，不是List的了）

  // 取消单条记录
  const targetRecord = myList.getStore().getAt(0); // 示例：取第一条记录
  selectionModel.deselect(targetRecord);
  
  // 取消多条记录
  const targetRecords = [record1, record2]; // 示例：传入记录数组
  selectionModel.deselect(targetRecords);
  

• 取消选中指定索引的项：用deselectAt()

  // 取消索引为2的项
  selectionModel.deselectAt(2);
  

进阶优化：减少代码改动量 #

如果你的项目里大量用到了List直接调用deselect()的代码，不想逐个修改的话，可以给List加个扩展封装，让旧代码直接兼容：

Ext.define('YourApp.override.dataview.List', {
    override: 'Ext.dataview.List',
    
    // 封装deselect方法，转发到选择模型
    deselect: function(record, suppressEvent) {
        const selectionModel = this.getSelectionModel();
        return selectionModel.deselect(record, suppressEvent);
    },
    
    // 可选：封装deselectAll方法
    deselectAll: function(suppressEvent) {
        const selectionModel = this.getSelectionModel();
        return selectionModel.deselectAll(suppressEvent);
    }
});

这样原来的代码不用大改，直接调用myList.deselect()就能自动转发到选择模型执行，兼容性拉满。

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