Reputation: 2232
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.
Upvotes: 0
Views: 1349
Reputation: 16
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);
})
}
}
}
Upvotes: 0
Reputation: 599
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.
Upvotes: 1
Reputation: 7315
Instead of using an object in the filter, pass the values in like so:
gridRecords.filter('value',newValue,true,false);
Upvotes: 0