Question

95

Filter a store with array of values from one property with ExtJS

rated 0 times [ 99] [ 4] / answers: 1 / hits: 7230 / 10 Years ago, mon, march 3, 2014, 12:00:00

I'm trying to apply a constraint on combobox. It's half-working at the moment.
On the combobox, I have this listener:

[...]

        listeners: {

            'focus': function (combo, value) {

                var orgComboVal = Ext.getCmp('Org1')

                var getOrgValue = orgComboVal.getValue();

                if (typeof getOrgValue !== undefined) {

                    reseaulist.clearFilter(true);

                    for (var q = 0, l = getOrgValue.length; q < l; q++) {

                        reseaulist.filter([

                            {property:'code_organisme', value: getOrgValue[q]}

                        ]);

                    }

                }

            }

        }

Ext.getCmp('Org1') defines another combobox.

When orgComboVal.getValue() is a single value, the filter is well applying.

but when it's an array of value, eg [5, 9], it's not working and the combobox supposed to be filtered shows no value (so I guess a filter is still applied but in an incorrect way).

I guess it's because the reseaulist.filter is called multiple time.
How can I achieve this ?

I saw the filterBy method but I don't know how to make it work.

Also, this post is interesting : How to filter a store with multiple values at once? but same, can't make it work since

getOrgValue.split(',')

is showing an error

(Object Array has no method split)

Any tips ? I'm using ExtJS 4.2.

EDIT

Thanks to @rixo, I've made it.
Also, I had to change some of the code he provided me, because the value of the Org1 combobox was always an array, even if empty, so the store filter was never cleared.

Here it is :

            'focus': function (combo, value) {

                var orgComboVal = Ext.getCmp('Org1')

                var values = orgComboVal.getValue();

                console.log(values)

                if (values != null) {

                    reseaulist.clearFilter(false);

                    if (Ext.isArray(values)) {

                        if (0 < values.length) {

                            reseaulist.filterBy(function(record, id) {

                                return Ext.Array.contains(values, record.get('code_organisme'));

                            });

                        } else {

                        reseaulist.clearFilter(true);

                    }   

                    } 

                } 

            }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

makaylahk

Add To Favorites

Follow

Total Points: 166

Total Questions: 94

Total Answers: 117

Location: Gabon

Member since Sat, Jul 25, 2020

4 Years ago

makaylahk questions

1 Electron store data locally without localstorage

Tue, Apr 26, 22, 00:00, 2 Years ago

1 Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response when using http get req from JS to SlackAPI

Mon, Feb 28, 22, 00:00, 2 Years ago

1 How do I use the useState hook to change the color of my react icons to blue?

Wed, Jul 21, 21, 00:00, 3 Years ago

1 Property 'selectionStart' does not exist on type 'EventTarget'

Fri, Mar 19, 21, 00:00, 3 Years ago

1 How can I pass multiple values in a single prop in react?

Sat, Feb 27, 21, 00:00, 3 Years ago

View All

answered 10 Years ago emiliano · Accepted Answer

Each filter is applied one after the other on the previously filtered data set, so your code implements a logical AND. That's why all values are filtered out...

Here's an example using filterBy to accept any value that is in your array:

function (combo, value) {

    var orgComboVal = Ext.getCmp('Org1')

    var values = orgComboVal.getValue();

    if (values != null) {

        store.clearFilter(false);

        if (Ext.isArray(values)) {

            store.filterBy(function(record, id) {

                return Ext.Array.contains(values, record.get('code_organisme'));

            });

        } else {

            record.get('code_organisme') === values;

        }

    } else {

        store.clearFilter(true);

    }

}

Or you could also use a regex with the filter method:

function (combo, value) {

    var orgComboVal = Ext.getCmp('Org1')

    var values = orgComboVal.getValue();

    if (values != null) {

        var filterValue = Ext.isArray(values)

            ? new RegExp('^(?:' + Ext.Array.map(values, function(value){return Ext.escapeRe(value)}).join('|') + ')$')

            : values;

        store.clearFilter(false);

        store.filter('code_organisme', filterValue);

    } else {

        store.clearFilter(true);

    }

}

Concerning your error, arrays indeed don't have a split method. Strings can be split into an array. Arrays, on their side, can be joined into a string...