能够远程和本地过滤商店

Question

我正在使用 Ext JS 7.1 Modern，我想知道是否有一种方法可以在本地过滤商店 remoteFilter: true。

我试图用 Sencha Fiddle 来解释我的案例，并附上了下面的代码。

该示例包含一个商店，该商店通过使用 names.json 中定义的动态数据并设置 remoteFilter 和 filters 配置来模拟对服务器的远程过滤。

    remoteFilter: true,
    filters: {
        property: 'id',
        value: 1
    }

检索数据后，假设用户希望通过在 'search' 字段中键入来在本地过滤检索到的数据。现在，我想在本地过滤商店，但由于 remoteFilter 设置为 true，我设置的过滤器向服务器发送请求而不是进行本地过滤。

有没有一种直接的方法来实现这个用例？感觉这是每个人都需要的非常常见的用例，所以我想确保我没有遗漏任何东西。

app.js

Ext.define('App.store.TestStore', {
    extend: 'Ext.data.Store',
    alias: 'store.teststore',

    fields: ['id', 'firstName', 'lastName'],

    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'names.json',
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    },

    remoteFilter: true,
    filters: {
        property: 'id',
        value: 1
    }
});

Ext.define('App.controller.TestController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.testcontroller',

    doSearch: function(field) {
        var list = this.lookup('list'),
            store = list.getStore(),
            value = field.getValue();

        var filters = store.getFilters();
        if (Ext.isEmpty(value))
            filters.remove('firstName')
        else {
            filters.add(new Ext.util.Filter({
                property: 'firstName',
                value: value,
                operator: 'in'
            }))
        }
    }
});

Ext.define('App.dataview.TestList', {
    extend: 'Ext.dataview.List',
    xtype: 'testlist',

    store: {
        type: 'teststore'
    },
    itemTpl: '<div class="contact">{id} <b>{firstName} {lastName}</b></div>'
});

Ext.define('App.MainView', {
    extend: 'Ext.Panel',
    controller: 'testcontroller',
    fullscreen: true,

    items: [{
        xtype: 'searchfield',
        ui: 'solo',
        placeholder: 'Search names',
        listeners: {
            buffer: 500,
            change: 'doSearch'
        }
    }, {
        reference: 'list',
        xtype: 'testlist'
    }]

})

Ext.application({
    name: 'App',

    mainView: 'App.MainView',

    launch: function () {

    }
});

names.json

var data = [{
    id: 1,
    firstName: 'Peter',
    lastName: 'Venkman'
}, {
    id: 2,
    firstName: 'Raymond',
    lastName: 'Stantz'
}, {
    id: 3,
    firstName: 'Egon',
    lastName: 'Spengler'
}, {
    id: 4,
    firstName: 'Winston',
    lastName: 'Zeddemore'
}]

var results = data.filter(function(record) {
    if (params.filter) {
        return record.id > params.filter[0].value
    }
})

return {
    "success": true,
    "data": results
}

提前致谢

Answer 1

Use the chained store functionality. Filter your main store remotely, then create a chained store based off the main store to apply extra local filters.

埃文是对的。在早期版本的 Extjs 中，我们可以加载 remoteFilter: true，并使用帮助方法 filterBy 来本地过滤数据。已清除本地过滤器我们可以调用带有参数 true.

的 clearFilter 方法

但在最新版本中该功能已被删除。

onFilterEndUpdate 方法

 if (me.getRemoteFilter()) {

            me.getFilters().each(function(filter) {
                if (filter.getInitialConfig().filterFn) {
                    Ext.raise('Unable to use a filtering function in conjunction with ' + 'remote filtering.');
                }
            });

          ....
        }

如何使用chainedstore你可以看我的fiddle

能够远程和本地过滤商店

Ability to filter a store remotely and locally

extjs

extjs-stores

extjs7