How do I apply filter in ExtJS

I am using :

Ext.ux.grid.FiltersFeature

It works fine, but whenever I load my store data

tablePanel.store.loadData(..)

the filters are not respected. The columns are visually selected as filtered (ie. greyed out), but all the rows are shown instead of the filtered subset of rows.

Here is the bug trapped in a JSFiddle :

http://jsfiddle.net/oliverwatkins/7hbt79bj/4/

To reproduce my problem :

Select column filter on Name, to the value 'foo'
Now only one row should show (the foo row)
Now click on Reset.
The filter is set to only show 'foo', but it shows 'bar' as well.

I know there is a method which removes filters :

grid.store.clearFilter();

I am looking for a method like this :

grid.store.applyFilters();

So I can execute it after I refresh the data in my table.

** UPDATE **

If I dig a bit deeper I can see that in the table panel there is a filter string being set.

tablePanel --> filters --> filters --> items --> [1] --> inputItem --> value = 'mySearchString'

However that is the filters on the tablePanel. If I look at the tablePanel-->store instead, I find filters with no items set :

tablePanel --> store --> filters --> filters --> items --> [0]

It is almost as if there are two different filtering systems at play here which are not communicating with each other.

And what makes things all even more infuriating is that store has a filter method, and grid does not have a filter method.

grid.store.filter(); //method exists

grid.filter(); //crashes

puzzling..

Solution

I used your fiddle and came up with a solution that sets the values after store load. After grid.store.loadData I added this code that reapplies the filters one by one.

var filterData = grid.filters.getFilterData();
Ext.Array.each(filterData, function(filter){
    grid.filters.filters.getByKey(filter.field).setValue(filter.data.value)
})