ExtJS Store dynamically filters in already filtered storage

Question

I am creating a CombiBox SearchAsYouType tied to a Store. It contains the input tokenization in words and a comparison (at the moment) with all the properties of the object:

{"id": "id_someid", "lastName": "Porker", "firstName": "Peter"} 

I decided to create Filters on the fly when the changes to the list change:

 Ext.define('MyApp.controller.SearchFilterController', { extend: 'Ext.app.Controller', views: [ 'SearchAsYouTypeCombo' ], configureFiltersBeforeQuery: function(queryPlan) { //add filter per word token comboBox = queryPlan.combo; queryString = queryPlan.query; words = queryString.split(/[,\s]+/); myStore = comboBox.getStore(); myStore.clearFilter(false); //I also tried without this line, did not help if(!Ext.isEmpty(queryString)) { //create a filter per word filters = []; Ext.Array.each(words, function(word, index, wordsArray){ console.log('NEW FILTER: word: ' + word); filterAllPropertiesFilter = Ext.create('Ext.util.Filter', { filterFn: function(item){ match = false; Ext.Object.each(item.data, function (property, value){ //match beginning of word match = match || (String(value).toLowerCase().lastIndexOf(word.toLowerCase(), 0) === 0); return !match; //do not check other properties when match is found }); return match; }}); filters.push(filterAllPropertiesFilter); return true; }, this, false); myStore.addFilter(filters); } return true; }, init: function(application) { this.control({ 'SearchAsYouTypeCombo': { beforequery: this.configureFiltersBeforeQuery } }); } 

});

EDIT: There is a Kevin Bacon in my store. Let's say that none of the LastNames of others in the local store starts with "Ba", but there is someone else whose FirstName name is "Barry". So when I type in the search query “Ba”, I want to see the results of “Kevin Bacon” and “Barry White”. It works.

But here's what I can’t do: When I continue to expand searchString to “Ba, Ke”, I don’t want the code to interact again with all the Faces in my Store when applying the filter. I want the next filter to check only two results to the left of the previous filter. I kind of want to apply a filter to another filter.

Answer 1

You won’t be able to do what you want using warehouse filters, because all of these methods ultimately filter the entire data set. Therefore, you need to apply your filter yourself!

To do this, we need to copy the code from Ext.data.Store#filter , except for the part that restores the entire data set before filtering.

This gives us:

 // -- Ensure that our current filter is not stalled ---------------- // Clear our filtering if the query string has changed in a way // that invalidate the current filtering if ( // previous filter is stalled ) { myStore.data = myStore.snapshot; delete myStore.snapshot; } // -- Create your new or updated filter ---------------------------- var filter = new Ext.util.Filter({ filterFn: function(record) { // your filtering logic } }); // -- Apply the filter to the currently filtered data -------------- myStore.snapshot = myStore.snapshot || myStore.data.clone(); // !!! // Here the essential difference. We filter from the filtered dataset: myStore.data = myStore.data.filter(myFilter); // Instead of starting again from the unfiltered snapshot like in the original code: //me.data = me.snapshot.filter(filters); myStore.constructGroups(); if (myStore.sorters.length && myStore.sortOnFilter && !myStore.remoteSort) { myStore.sort(); } else { // fire datachanged event if it hasn't already been fired by doSort myStore.fireEvent('datachanged', myStore); myStore.fireEvent('refresh', myStore); } // This line probably useless since filters haven't actually changed... //myStore.fireEvent('filterchange', myStore, myStore.filters.items); 

As I said in my previous comment, you obviously need a way to detect when the query string has been changed so that the current filtering is out of date. I added a fake condition at the beginning of the code to show you how to clear this hacker filtering when this happens.