View Full Version : [CLOSED] Filter on Ext.data.Store is not working properly with ComboBox

8 Mar 2011, 9:34 AM
I've updated the combos example (under examples\form) that shipped with ExtJS 4 (pr3). I've added a button and on click of the button, I'd like to filter the combo's store to display only Alabama state. After first click of the button the store filters out the records properly (i verified it in Firebug ) but still i can see all the states in the combo box. I need to click second time to get the effect of the filter.

I've attached the js and html file after changing the extension to txt.

Please advise.

9 Mar 2011, 10:35 AM
I have this same issue when tying a country combobox to filter the state combobox. I can set the filter and reload, but once the state combobox is clicked (for the first time) it trashes the filters set on the store and treats it as though it was never clicked.

For example:

Field 1) Country Combo
Field 2) State Combo

Using ajax remote sorting, filters, etc. autoLoad: false on the store.

1) Click Country Trigger Icon
2) Country store loads data
3) Drop down/fly out disappears immediately
4) Click Country Trigger Icon
5) Country full list appears
6) Select a Country
7) state.store.filter('country_id', country.getValue())
8) state.store.load();
9) State store loads data with the country_id filter applied
10) Click State Trigger Icon
11) State store loads data WITHOUT ANY filter applied
12) State full list appears unfiltered
13) Click Country Trigger Icon
14) Select a different Country
15) Step 7 through 9 applied
16) Click State Trigger Icon
17) State list appears filtered

So the FIRST click on the State combo's trigger kills the filters, but any successive click does not. Even if you pre-load the data before ANY click occurs, the FIRST click always trashes the filtering. I suspect is has to do with the following:


Line 597 inside of Ext.form.Combobox#doQuery:


Full Code:

doQuery: function(queryString, forceAll) {
queryString = queryString || '';

// store in object and pass by reference in 'beforequery'
// so that client code can modify values.
var me = this,
qe = {
query: queryString,
forceAll: forceAll,
combo: me,
cancel: false
store = me.store,
isLocalMode = me.queryMode === 'local';

if (me.fireEvent('beforequery', qe) === false || qe.cancel) {
return false;

// get back out possibly modified values
queryString = qe.query;
forceAll = qe.forceAll;

// query permitted to run
if (forceAll || (queryString.length >= me.minChars)) {
// expand before starting query so LoadMask can position itself correctly

// make sure they aren't querying the same thing
if (!me.queryCaching || me.lastQuery !== queryString) {
me.lastQuery = queryString;
if (isLocalMode) {
if (!forceAll) {
store.filter(me.displayField, queryString);
} else {
params: me.getParams(queryString)

if (isLocalMode) {
if (me.typeAhead) {
return true;

6 Oct 2011, 5:18 AM
i have the same issue! someone has found a solution?
another strange effect is that the store grows up every time i click on combobox and the filter is called.

Below my code:

var badgeFilter = new Ext.util.Filter({
filterFn: function(record) {
return (Ext.data.StoreManager.lookup('IdUsedBadgeStore').findExact('id',record.get('id')) == -1);

var avaibleBadgeStore = Ext.create('Ext.data.Store',{
storeId: 'IdAvaibleBadgeStore',
proxy: {
type: 'ajax',
url : 'URL',
reader: {
type: 'json'
filterOnLoad : true

var usedBadgeStore = Ext.create('Ext.data.Store',{
storeId: 'IdUsedBadgeStore',


... below i fill usedBadgeStore and then call avaibleBadgeStore.load()

6 Oct 2011, 5:33 AM
ok perhaps it's not a bug :

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.ComboBox-property-lastQuery (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.form.field.ComboBox-property-lastQuery)

"To make sure the filter in the store is not cleared the first time the ComboBox trigger is used configure the combo with lastQuery=''"