Question

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

Answer 1

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