How to filter multiple extjs grid columns?

Question

To filter a single grid column, we can use:

{ xtype: 'button', text:'Search', handler:function(){ store.clearFilter(); var searchValue = Ext.getCmp("textFieldId").getValue(); store.load().filter('GridFieldName', searchValue); } } 

but how to search for several fields at once, for example:

 { xtype: 'button', text:'Search', handler:function(){ store.clearFilter(); var searchValue = Ext.getCmp("textFieldId").getValue(); store.filter([ {property: "GridFieldName", value: searchValue}, {property: "GridFieldName1", value: searchValue} ]); } } 

any ideas?

EDIT:

It is strange that in both cases only one search works:

It works:

 store.filter([ { property: "FirstName", value: searchValue } ]); 

and it works:

 var FirstNameFilter = new Ext.util.Filter({ property: "FirstName", value: searchValue }); store.filter(FirstNameFilter); 

but this is not so:

 store.filter([ { property: "FirstName", value: searchValue }, { property: "LastName", value: searchValue } ]); 

or does it:

  var filters = [ new Ext.util.Filter({ property: "FirstName", value: searchValue }), new Ext.util.Filter({ property: "LastName", value: searchValue }) ]; store.filter(filters); 

Answer 1

Try creating instances of Ext.util.Filter as follows:

 var filters = [ new Ext.util.Filter({ property: "GridFieldName", value: searchValue }), new Ext.util.Filter({ property: "GridFieldName1", value: searchValue }) ]; store.filter(filters); 

Alternatively, you can create a separate filter with custom logic:

 var filters = [ new Ext.util.Filter({ filterFn: function(item){ return item.get('GridFieldName') == searchValue && item.get('GridFieldName1') == searchValue; } }) ]; store.filter(filters); 

Answer 2

I found this post when looking for a way to filter across multiple columns (virtually all columns) with OR logic. (so the search condition matches column A OR matches column B, etc.). I finished the filtering using a special filtering function, for example:

 ... var regex = RegExp('Insert searchclause here', 'i'); store.filter(new Ext.util.Filter({ filterFn: function (object) { var match = false; Ext.Object.each(object.data, function (property, value) { match = match || regex.test(String(value)); }); return match; } })); 

NTN

Answer 3

  store.clearFilter(); var searchValue = Ext.getCmp("textFieldId").getValue(); if (!!searchValue) { var filters = [ new Ext.util.Filter({ filterFn: function (item) { return item.get('FirstName').toLowerCase().indexOf(searchValue.toLowerCase()) > -1 || item.get('LastName').toLowerCase().indexOf(searchValue.toLowerCase()) > -1; } }) ]; store.filter(filters); } 

This is my code that applies from Paul.
For my work, which is looking for multi-column, case insensitive, ignore the position with OR logic.

I hope for this help.

Answer 4

That should work. Is not? As far as I understand, if you apply filters, as you have shown, they should be filtered by both criteria.

 store.filter([ {property: "GridFieldName", value: searchValue}, {property: "GridFieldName1", value: searchValue} ]); 

Alternatively, you should be able to use the setFilter function to add new filters.

 store.setFilter("GridFieldName", searchValue) store.setFilter("GridFieldName1", searchValue) 

If you use setFilter with no arguments, it should just reuse the filters you previously defined. They are only deleted when clearFilter is called.