1

我正在使用 Ext JS 7.1 Modern，我想知道是否有办法在本地过滤具有remoteFilter: true.

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

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

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

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

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

应用程序.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 () {

    }
});

名称.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
}

提前致谢

4

1 回答 1

1

使用连锁店功能。远程过滤您的主要商店，然后基于主要商店创建一个连锁商店以应用额外的本地过滤器。

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

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

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你可以在我的小提琴中看到

于 2020-01-24T08:37:42.253 回答