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 ?

Answer 1

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