CODEWITHSUNDEEP
javascriptextjsfilterlogical-operators
user3740961
user3740961

Reputation: 329

extjs 5 getStore().filter

I created a simple function. If I add value to users_filter (example: var users_filter = "abc") then filter check firstname. But filter is not checking middlename or lastname or email. Why? I'dont using logical OR on filter?

click: function(){
      Ext.getCmp('users').getStore().filter('firstname' ||'middlename' || 'lastname' || 'email',
      Ext.getCmp('users_filter').getValue());
}

Upvotes: 1

Views: 1016

Answers (1)

VDP
VDP

Reputation: 6420

Your first problem is basic javascript. The or operator is initially for boolean operations. But because some values evaluate to true or false (truthy/falsy) we can use it to our advantage for e.g. assignment.

var filterVariable = 'firstname' ||'middlename' || 'lastname' || 'email';
    console.log(filterVariable); //returns 'firstname'

consider this snippet:

var someFilter,
    defaultFilter = 'lastname';

if(condition) { 
    someFilter = 'firstname';
}

var filterVariable = someFilter || defaultFilter;

now if condition === true => filterVariable evaluates as 'firstname' else => filterVariable evaluates as 'lastname'

But be careful if the someFilter is set to "", 0, [], null, ... it will evaluate as false and take the defaultFilter...

So what you wrote can never work!

That aside.. this will work:

click: function(){
    var store = Ext.getCmp('users').getStore(),
        val = Ext.getCmp('users_filter').getValue();

    store.filterBy(function(rec){
        return rec.get('firstname') === val ||
               rec.get('middlename') === val || 
               rec.get('lastname') === val ||
               rec.get('email') === val; 
    });
}

fwi: I try to avoid Ext.getCmp(). What happens if you ever want the reuse parts. Then it is possible you have 2 users-panels... and the code is broken. Maybe in this case it sounds silly but generally working up or down from the button you clicked on is better...

click: function(button) { 
    var usersGrid = button.down('users'); 
    //...
}

Upvotes: 1

Related Questions