View Full Version : Store: removeFilter does not work when called in MVC controller?

14 Aug 2014, 9:34 AM
Hi all

I'm new with extJS and not yet very familiar with some behavior. And I know my app architecture is not too nice.
But the following example is very strange to me:

Main app setup:

Library used: ext-all-debug-w-comments.js version 4.2.2

I have a store "ColumnDefinitions"
A Store "Table Data"

In my controller:
At onConfigureStores I create a new - var colDefs = []

I loop trough all records from ColumnDefinitionStore and for each record, I setup the column (dynamically datatype from ColumnDefinitions).

At the end I make a reconfigure:
me.getProperty().reconfigure(me.getTableDataStore(), colDefs);

Now my question, which may not have to do anything with the above setup ;)

Inside the loop to set together my ColDefs, I add at each column a Textfield and a Button to the header for filter function.

So each header has a textfield and a button next of it. The textfield to enter filter string (enter event listening to add filter). Adding the filter works.

The button next to the textfield has a handler, which should remove the filter and update the store and reload the data in the grid without the filter just removed.

Inside the header I add a container with the textfield and the button. The following code is this encapsulated button.

Here is the problem:

xtype: 'button',
id: 'headerRemoveFilterBtn_' + record.data.name.toLowerCase(), //record comes from the loop I described before, id is set correctly
iconCls: 'icon-bullet_cross',
tooltip: 'click to remove filter from this field',
handler: function (button, e) {
var propertyString = button.getId().split("_")[1]; // split string at _ and take part right of _

var lTableDataStore = me.getTableDataStore();

//here is the problem:
lTableDataStore.removeFilter(propertyString, true); //does not remove the filter, filter remains in store, and the true does not reload the store as it should regarding the api -- removeFilter()

lTableDataStore.reload(); //this sends a new request to the server, I set autoSync: true in the store. BUT, in the request, the filter is still sent
// Query String Parameter -- filter:[{"property":"column6","value":"someFilterValue"}]

//Checking the source of "removeFilter()" I see, that internally it calls me.filters.removeAtKey(toRemove) where me is the store

//The following direct call in my controller works!

lTableDataStore.filters.removeAtKey(propertyString); //filter is effectively taken out of the store
lTableDataStore.reload(); //new request is sent without the filter, response from server has unfiltered data, data is shown correctly in my grid


So here my question:

Do I make something wrong, that removeFilter() does not work but "lTableDataStore.filters.removeAtKey(propertyString)" works?
Or is it a bug in extjs lib?

Thanx and cheers

17 Aug 2014, 9:01 PM

To better follow your setup can you post a small test case with the grid, store, and perhaps one column w/ filter field + button at https://fiddle.sencha.com?