Возможность фильтрации магазина удаленно и локально - PullRequest
Новая
       72

Возможность фильтрации магазина удаленно и локально

1 голос
/ 24 января 2020

Я использую Ext JS 7.1 Modern, и я хочу знать, есть ли способ отфильтровать магазин также локально , который имеет remoteFilter: true.

Я попытался объяснить свой случай с помощью Sencha Fiddle , а также прикрепил приведенный ниже код.

В примере содержится хранилище, которое имитирует удаленную фильтрацию на сервере с помощью Dynami c данные, определенные в names.json и настройки remoteFilter и filters config. 

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

После того, как данные получены, предположим, что пользователь хочет отфильтровать полученные данные локально, введя в Поле поиска. Теперь я хочу отфильтровать хранилище локально, но поскольку для 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
}

Заранее спасибо

1 Ответ

1 голос
/ 24 января 2020

Используйте функциональность цепочки магазина. Отфильтруйте ваш главный магазин удаленно, затем создайте цепной магазин на основе основного магазина, чтобы применить дополнительные локальные фильтры.

Эван прав. В ранней версии Ext js мы могли загружать 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 Вы можете увидеть в моей скрипке

...