ExtJS - Grid filter with multiple columns and multiple values

Question

I create a grid and a toolbar with Two Menu of menuCheckItem. When i check the menuCheckItem the grid filters even with multiple values and multiple columns. This working fine, as I have created grid 1st and then the toolbar

this.up('') // Used Instead of Ext.getCmp()

Working FIDDLE - https://fiddle.sencha.com/#view/editor&fiddle/2lop

Now I am trying to create same toolbar along with Menu separately on top 1st and then create grid at below. But while doing this, nly Multiple values is working.

I am trying to filter grid with multiple values as well as multiple columns.

Few things i tried -

// Only Filters One Value at a time with each Columns
store.queryBy(function(record,id){
 return (record.get('name') == someValue && record.get('phone') == otherValue);
});

and

// Filters Many Columns with Single Value
filter.add(
     property : name, phone
     value : "somevalue"
     operator : "OR"

);

Is there any way to implement Toolbar 1st and then grid ? And Filter grid with many values and columns simultaneously ?

So your problem is that you can't filter grid with both checkbox menus? Bcz if i filter by number and then by name, number filter is removed and only name filter remains. Did i get right? — beso9595
Yes, you are right.@beso9595. The Fiddle which i have give works fine, even if i filter by number and then by name,Both the name and phoneNo. filter is applied. Bcuz I create grid 1st and then toolbar menu, so by using ".up()" i am able to achieve both filters. But if i create toolbar and grid as separate elements, I couldn't sync both name and phoneNo filters. — user10386436

beso9595 beso9595 · Accepted Answer · 2018-09-22T16:32:42

In this FIDDLE i remade a function(checkchange), which is universal , can be put separately and you'll be able to attach it to every menucheckitem you create. The only thing is that if you add new menucheckitem filter you should name the menucheckitem id with the name of the columnDataIndex-Menu and add this columnDataIndex in menuFilters and thats all.

checkchange: function (checkbox, checked, eOpts) {
    var menuFilters = ['name', 'phone'];
    var getChecked = function (m) {
        var checkedItems = [];
        m.items.items.forEach(function (c) {
            if (c.checked) {
                checkedItems.push(c.text);
            }
        });
        return checkedItems;
    };
    //
    var menus = new Map();
    menuFilters.forEach(function (e) {
        menus.set(e, Ext.getCmp(e + '-Menu'));
    });
    //
    var fieldValues = [];
    menuFilters.forEach(function (e) {
        fieldValues.push([e, getChecked(menus.get(e))]);
    });
    //
    var store = checkbox.up('grid').store;
    store.clearFilter();
    //
    if (fieldValues.length > 0) {
        store.filterBy(function (record) {
            var fV = this.fieldValues;
            for (var i = 0; i < fV.length; i++) {
                if (fV[i][1].length > 0) {
                    if (fV[i][1].indexOf(record.get(fV[i][0])) === -1) {
                        return false;
                    }
                }
            }
            return true;
        }, {
            fieldValues: fieldValues
        });
    }
}

ExtJS - Grid filter with multiple columns and multiple values

1 Answers