Store reloads after adding (remote) filter

[mdb]

Hi guys,

Not sure whether this is a bug, or just some changed behavior in Ext Js 5. After upgrading from Ext Js 4 to 5 I'm struggling with the following:

I have a store with a proxy and config remotefilter=true. In Ext Js 4 I can add filters to the store, and then (manually) load the store. This is desirable because:

• I can add a few different filters to the store and load the updated data once
• A user can type in a search field, it updates the filter after every key-down, but doesn't reload the store until the user stopped typing for x seconds

The second point isn't that much of a problem, as I could rewrite my code to apply the filter after the user stopped typing, instead of with every keydown. (which actually might be a better implementation)

In order to solve this behavior, I tried using the suspentEvents() method on both the store and proxy. The attached grid did not show a load mask after doing so, but the store still reloaded in the background.

Anybody a solution?

Thanks!

[mdb]

Okay, hereby a fiddle which illustrates the problem. Store is loaded 3 times, with autoload=false and only one load trigger. suspendEvents() will prevent the load listener being triggered, still the URL is loaded 3 times.

https://fiddle.sencha.com/#fiddle/ajd



Looks like a bug to me. @moderators, if so, could you please move this topic to the Ext 5: bugs forum?

--
Edit: after some debugging I found the following:
In Ext Js 4.2 the store doesn't reload when adding filters using store.filters.add(...). However, when using store.addFilter(...) the store does reload. In Ext Js 5 the store reloads in both cases. You can change the framework in the Fiddle mentioned above to see the difference in times loaded in Ext Js 4.2 vs Ext Js 5.

[mdb]

Posted also a ticket and got a solution. An AbstractStore has a private property 'autoFilter'. You can switch off the autoFilter individually (store.setAutoFilter(false);), or with an override. I use this one:

Ext.override(Ext.data.AbstractStore, {    initConfig: function(instanceConfig) {        if(!instanceConfig.data){            instanceConfig.autoFilter = false;        }        this.callParent([instanceConfig]);    }}); 

Not sure whether this is the best way of doing such override, but it works for me. The 'if(!instanceConfig.data){' part checks if it has (local) data on init, because that stores may filter whenever they want.

Hope that this may help for someone else.

[razvanioan]

Or you can use beginUpdate() and endUpdate() methods on filterCollection, something like this:

grid.store.getFilters().beginUpdate();

// maybe you want to clear filters before ...
grid.filters.clearFilters();

grid.columnManager.getHeaderByDataIndex('company').filter.setValue('Some name');
grid.columnManager.getHeaderByDataIndex('date').filter.setValue({gt:'2000-01-01'});

// now the store will load only once, with desired filters applied
grid.store.getFilters().endUpdate(); 

[guillermoabbona]

I used a workaround. After I instantiate the store I run the following code:

myStore.getFilters().begingUpdate();

After that, if you never wrap withe the endUpdate() method, all filters will be done on

myStore.load();

It worked in my case, but try to do it with sorters, and also worked, but the grid column headers sort function don't work unless calling the endUpdate() method.

PD: I used in a buffered store.