ExtJS - Grid multiple value filter in same column

Question

Needed help in filtering grid with multiple values.

I am trying to create a menucheckitem with many phone value. And filter the grid based on the phone Checked.

By using below code, i am able to filter grid based on single value.

store.filter([{
    property: 'type',
    value: value
}]);

Now i wanted to filter grid, even if i select many phone checkBoxs. I tried using store.filterBy(). But, not working properly, i do not know what i am doing wrong.

var test = ["111-222-333","111-222-334","111-222-335"]

store.filterBy(function(record, val){
      return test.indexOf(record.get('phone')) != -1 
    }
});

This filters the first value only i.e. "111-222-333" value only.. Not filtering all other value in test.

find sample code in here - https://fiddle.sencha.com/#view/editor&fiddle/2ll7

beso9595 beso9595 · Accepted Answer · 2018-09-19T20:42:56

So i forked your fiddle, remade it and i think i have achieved what you wanted. First of all your definition of menucheckitem in bbar was kind of strange. I think you needed a list of phones which would be checkboxes, but the list is depends on the store records, so it needs to be build dynamically (as i did it in afterrender). Actually this must be inside of store's load event, but in example it didn't fire(maybe bcz it is a memory type of store). Anyway when you copy the code you'll need to put all of the afterrender content inside the store load event.

FIDDLE

Ext.application({
name: 'Fiddle',

launch: function () {
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: {
            fields: ['name', 'email', 'phone', 'type'],
            data: [{
                name: 'Marge',
                email: '[email protected]',
                phone: '111-222-334',
                type: 'Foo'
            }, {
                name: 'Homer',
                email: '[email protected]',
                phone: '111-222-333',
                type: 'Foo'
            }, {
                name: 'Marge',
                email: '[email protected]',
                phone: '111-222-334',
                type: 'Foo'
            }, {
                name: 'Bart',
                email: '[email protected]',
                phone: '111-222-335',
                type: 'Bar'
            }, {
                name: 'Bart',
                email: '[email protected]',
                phone: '111-222-335',
                type: 'Bar'
            }, {
                name: 'Lisa',
                email: '[email protected]',
                phone: '111-222-336',
                type: 'Bar'
            }]
        },
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email'
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }, {
            text: 'Type',
            dataIndex: 'type'
        }],
        listeners: {
            afterrender: function (grid) {
                var store = grid.store;
                var phones = store.getData().items.map(function (r) { //get the phones
                    return r.get('phone');
                });
                var phonesFiltered = [];
                phones.forEach(function (p) { //filter them to make records unique
                    if (!phonesFiltered.includes(p)) {
                        phonesFiltered.push(p);
                    }
                });
                var items = [];
                phonesFiltered.forEach(function (p) { //create `menucheckitem` items with phone names and attaching `checkchange` event
                    items.push({
                        xtype: 'menucheckitem',
                        text: p,
                        listeners: {
                            checkchange: function (checkbox, checked, eOpts) {
                                var menu = checkbox.up('menu');
                                var filterPhones = [];
                                menu.items.items.forEach(function (c) { //get all checked `menucheckitem`-s
                                    if (c.checked) {
                                        filterPhones.push(c.text);
                                    }
                                });
                                var store = checkbox.up('grid').store;
                                store.clearFilter();
                                if (filterPhones.length > 0) {
                                    store.filterBy(function (record) {
                                        return this.filterPhones.indexOf(record.get('phone')) !== -1;
                                    }, {
                                        filterPhones: filterPhones
                                    });
                                }
                            }
                        }
                    });
                });
                //
                Ext.getCmp('toolbarId').add({
                    xtype: 'menu',
                    // height: 120,
                    floating: false,
                    items: items
                });
            }
        },
        bbar: {
            xtype: 'toolbar',
            height: 200,
            id: 'toolbarId'
        },
        renderTo: Ext.getBody()
    });
}
});

ExtJS - Grid multiple value filter in same column

1 Answers