How to filter multiple extjs grid columns?

Question

To filter one 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 multiple fields at once, something like:

{
    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:

The weird thing is that in both cases, only single search works:

This works:

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

and this works:

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

store.filter(FirstNameFilter);

but this does not:

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

or does this:

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

Answer 1

Try to create instances of Ext.util.Filter like this:

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 single 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 while searching for a way to filter on multiple columns (actually ALL columns) with OR logic. (so the search-clause matches column A OR matches column B etc.) I ended up filtering with a custom filterfunction like:

...
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;
      }
}));

HTH

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 which apply from Pavel.
For my work which search Multi-column, Non-case sensitive, Ignore position by OR logic.

Hope this help.

Answer 4

That should work. Is it not? As I understand it if you apply filters as you have shown, it should filter by both criteria.

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

As an alternative 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 reapply the filters you have previously defined. They are only removed if you call clearFilter.