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

Question

我使用ExtJs创建了一个商店,我想将存储的值加载到ComboBox.但在加载值之前,我需要根据另一个comboBox中选择的值过滤一些数据.

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

模型:-

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

商店:-

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'}
   ]});

现在我正在使用这个cityStore加载Combobox.但在加载之前,如果stateId为1,那么只有3条记录(班加罗尔,迈索尔,Dharwad)加载到组合框中,如果stateId为2则其他3条记录加载到组合框中.我怎么能实现它.

Answer 1

根据Ext.data.Store过滤方法文档:

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

更新

我发现ComboBox自己过滤数据,没有机会改变它的行为.但是我看到了这个问题的两个解决方案:

1. 手动过滤数据(请参阅Ext.util.MixedCollection过滤器)并将其加载到您的商店中(请参阅Ext.data.Store加载)

2. 禁用商店clearFilter和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()方法.