如何在ExtJs商店中使用过滤器？

我使用 ExtJs 创建了一个商店，我想将商店的值加载到 ComboBox。但在加载值之前，我需要根据另一个组合框中选择的值过滤一些数据。

因此，为了这个目的，我认为我需要在商店应用过滤器，请任何人都可以帮助我如何做到这一点。

Model:-

Ext.define('City', {
extend: 'Ext.data.Model',
fields: [
        { name: 'StateId', type: 'string' },
        { name: 'City', type: 'string' },
]});

Store:-

var cityStore = Ext.create('Ext.data.Store', {
model: 'City',
data : [
    { StateId: '1', City: 'Bangalore'},
    { StateId: '1', City: 'Mysore'},
    { StateId: '1', City: 'Dharwad'},
    { StateId: '2', City: 'Mumbai'},
    { StateId: '2', City: 'Pune'},
    { StateId: '2', City: 'Nagpur'}
   ]});

现在我正在使用这个城市商店加载到组合框中。但在加载之前我想要如果状态ID为1那么只有3条记录（班加罗尔、迈索尔、达瓦德）加载到组合框中，如果状态 ID 为 2然后其他 3 条记录加载到组合框中。我怎样才能实现它。

根据Ext.data.Store过滤器 http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-filter方法文档：

var stateId = 1; // your value
cityStore.clearFilter(true);
cityStore.filter('StateId', stateId);

Update

我发现 ComboBox 会自行过滤数据，并且没有机会更改其行为。但我看到这个问题的两个解决方案：

1. 手动过滤数据（参见Ext.util.MixedCollection 过滤器 http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.MixedCollection-method-filter）并将其加载到您的商店中（请参阅Ext.data.Store加载 http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-load)

2. 禁用商店的clearFilter and filter方法并使用自己的cityFilter:

   Ext.define('CityStore', {
       extend: 'Ext.data.Store',
       filter: Ext.emptyFn,
       clearFilter: Ext.emptyFn,
       cityFilter: function (stateId) {
           Ext.data.Store.prototype.clearFilter.call(this);
           Ext.data.Store.prototype.filter.call(this, 'StateId', stateId);
       }
   });
   

   然后使用cityFilter() method.