CODEWITHSUNDEEP
extjsgridfiltering
ipavlic
ipavlic

Reputation: 4966

ExtJS grid filtering - activating two at the same time

I have the following code to filter a grid from values inputed in a form on a click of a button. The problem is that the first time the filters are activated, only the first filter (displayNameFilter) will be included in the request.

The second time and on, both filters will be included in a request. How can I work around that issue?

var nameFilter = grid.filters.getFilter('name');

if (!nameFilter) {
    nameFilter = grid.filters
            .addFilter({
                type : 'string',
                dataIndex : 'name'
            });
}
nameFilter.setValue(Ext.getCmp('name-filter').getValue());

var displayNameFilter = grid.filters.getFilter('displayName');

if (!displayNameFilter) {
    displayNameFilter = grid.filters
            .addFilter({
                type : 'string',
                dataIndex : 'displayName'
            });
}

displayNameFilter.setValue(Ext.getCmp('display-name-filter').getValue());

displayNameFilter.setActive(true, false);
nameFilter.setActive(true, false);

Upvotes: 1

Views: 4205

Answers (2)

ipavlic
ipavlic

Reputation: 4966

This worked for me:

handler : function() {

    var filters = [];

    // get filters from a form...
    var values = filterForm.getValues();
    for (var f in values) {
        var value = values[f];
        if (value) {
            filters.push({ property: f, value: value });
        }
    }

    //...and add all of them to the store used by the grid directly
    if (filters.length) {
        // prevent events firing here...
        gridStore.clearFilter(true);
        // ...because they will fire here
        gridStore.filter(filters);
    } else {
        gridStore.clearFilter();
    }
}

Upvotes: 2

egerardus
egerardus

Reputation: 11486

I had a similar problem. The solution is a bit hokey but it works for me, notice that the filter variable is defined a second time within the defer call (it is needed):

grid.filters.createFilters();
var nameFilter = grid.filters.getFilter('name');
if (!nameFilter) {
    nameFilter = grid.filters
            .addFilter({
                type : 'string',
                dataIndex : 'name'
            });
}
nameFilter.setActive(true);
var displayNameFilter = grid.filters.getFilter('displayName');
if (!displayNameFilter) {
    displayNameFilter = grid.filters
            .addFilter({
                type : 'string',
                dataIndex : 'displayName'
            });
}
displayNameFilter.setActive(true);
Ext.Function.defer(function() {
    nameFilter = grid.filters.getFilter('name');
    nameFilter.setValue(Ext.getCmp('name-filter').getValue());
    displayNameFilter = grid.filters.getFilter('displayName');
    displayNameFilter.setValue(Ext.getCmp('display-name-filter').getValue());
}, 10);

Upvotes: 2

Related Questions