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

Question

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

Please note that tags are not keywords. Stuffing the tag list full of the same words that are in your question will not help categorize it. Always be sure to read the descriptions that appear when selecting tags! — Charles, Mar 03 '14 at 10:29

score 0 · Accepted Answer · answered Mar 03 '14 at 11:21

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...

I tried your first solution and it's working, nice :) ! Just a point, the else { store.clearFilter(true); } is never triggered :(, so if the user erase the value from Org1 combo, the other combo is still filtered. I console.log the value of the Org1 combo, and when it's empty it returns [] and not null. — Stranded Kid, Mar 03 '14 at 13:21
Ext.isArray(values) is always triggered because Org1 value is always an array, even if it's empty : []. So it always applies filter. — Stranded Kid, Mar 03 '14 at 13:41
You can also use `Ext.isEmpty`, it will return true for empty arrays as well as undefined or null values. — rixo, Mar 03 '14 at 13:57

score 0 · Answer 2 · answered Mar 03 '14 at 11:27

0

Try This....

var getOrgValue = "5,9,4"; // array of value

reseaulist.filterBy(function(rec, id) {
  return getOrgValue.indexOf(rec.get('code_organisme')) !== -1;
});

answered Mar 03 '14 at 11:27

user3283976

179
4

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

2 Answers2

Linked