Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to filter multiple extjs grid columns?

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);
like image 259
Davor Zubak Avatar asked Nov 03 '11 13:11

Davor Zubak


4 Answers

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);
like image 137
Pavel Podlipensky Avatar answered Oct 21 '22 21:10

Pavel Podlipensky


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

like image 38
Tim Avatar answered Oct 21 '22 20:10

Tim


    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.

like image 24
HATCHA Avatar answered Oct 21 '22 22:10

HATCHA


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.

like image 2
svenlol Avatar answered Oct 21 '22 20:10

svenlol