如何为 Ext.data.Store 实现自定义过滤算法答案

【问题标题】：How to implement custom filter algorithm for Ext.data.Store如何为 Ext.data.Store 实现自定义过滤算法
【发布时间】：2025-12-07 12:20:06
【问题描述】：

我想使用自定义算法过滤 Ext 存储。 JSON/AJAX 代理返回 >100 条记录，我需要根据一些标准将数量减少到前 5 名。

如何解决这个问题（不是算法，而是在哪里触发它）？

我目前的方法是像这样使用自定义阅读器

Ext.define('MyReader', {
  extend : 'Ext.data.reader.Json',
  alias : 'reader.myReader',

  getResponseData : function(response) {
    var data = this.callParent([response]);
    // algorithm
    return filteredData;
  }
});
Ext.define('SunApp.store.Stations', {
  extend: 'Ext.data.Store',
  requires: ['MyReader'],

  config: {
    model: 'SunApp.model.Station',
    autoLoad: true,
    proxy: {
      type: 'ajax',
      url: 'data.json',
      reader: {
        type: 'myReader'
      }
    }
  }
});

但我更愿意将算法基于商店模型而不是原始 JSON 数据。因此，我想在数据加载到商店时/之后进行过滤。请注意，在显示列表视图时，商店是由 Ext 隐式创建的：

Ext.define('SunApp.view.Stations', {
  extend: 'Ext.List',
  xtype: 'stations',

  config: {
    title: 'Stations',
    store: 'Stations',
    ...

因此，我不能只将一个函数添加到我在传递到列表之前手动调用的存储中。

【问题讨论】：

标签： extjs sencha-touch-2

【解决方案1】：

在这种情况下，过滤器可能需要多次遍历存储数据（即记录）以将完整集减少到我相信所需的集（我仍然是 Sencha 菜鸟.. .) 以下可能没问题：

编写加载事件监听器
进行魔法过滤
在商店调用setData 传递过滤后的数据

因此，与其在阅读器中过滤，不如这样：

Ext.define('SunApp.store.Stations', {
  extend: 'Ext.data.Store',
  config: {
    model: ...,
    sorters: [...],
    listeners: {
      load: function(store, records, success, eOpts) {
        var filteredRecords = filter(records);
        store.setData(filteredRecords);
      }
    },
    proxy: ...
  }
});

【讨论】：