how to filter Store extjs?

0
votes

I want to filter result from store like below. I have textbox and if I write anything in it then It should filter store accordingly. e.g. Store result is 

Monday
Tuesday
Wednesday
Thursday

Filter should work like if I type Mon then result should be Monday only.

I tried below code but no luck.

  items: {
        xtype: 'textfield',
        name: 'value',
        width : '100%',
        align: 'center',
        margin: '0 2 2 2',
        listeners : {
             change: function(field, newValue, oldValue, eOpts) {
             var gridRecords = Ext.getCmp('Grid').getStore();
             gridRecords.filter({
                               property: 'value',
                               value: newValue,
                               anyMatch: true,
                               caseSensitive: false
                                               });
                                            }
                                        }
                                      }

Thanks.

3
extjs
Can you update the rest of your code to show where this fllter is being applied? e.g. the text box event? – mindparse
updated code the code – webCoder
does the change event definitely fire, can you see what newValue is if you add a breakpoint in? – mindparse
what version of extjs are you using? – mindparse
sorry one more thing, what does your store config look like, can you share that too please – mindparse

3 Answers

1
votes

If you are using ExtJS 4, then you will need to clear the previous filter. As the documentation sates, any filter is applied to the previous filter. So before filtering the store call gridRecords.clearFilter().

Here is a working JSFiddle for you to look at.

0
votes

Instead of using an object in the filter, pass the values in like so:

gridRecords.filter('value',newValue,true,false);
0
votes

The below code will filter the store like you asked and is not case sensitive. You can also type any part of the string like 'es' and the store will filter to show both 'Tuesday' and 'Wednesday'. 

items: {
  xtype: 'textfield',
  name: 'value',
  width : '100%',
  align: 'center',
  margin: '0 2 2 2',
  listeners : {
    change: function(field, newValue, oldValue, eOpts) {
      var gridRecords = Ext.getCmp('Grid').getStore();
      gridRecords.filterBy(function(record){
        var value = record.get('value').toLowerCase();
        return (value.indexOf(newValue.toLowerCase()) != -1);
      })
    }
  }
}