Question

I have 2 checkboxes, Its called A and B. When i click on the checkbox A, then all the a particular field in the Grid should filter all the values with the value A in it.

If i click B, then the filed in the grid should filter and display all the values that has B in it.

If i click both, then both A and B should be displayed.

        if (chkbxVal== 'A') {
        console.log('Only A');
        return rec.get('gridField') == 'A'; 
        } else if (chkbxVal == 'B'){
        console.log('Only B');
        return rec.get('gridField') == 'B'; 
        } else {
        console.log('both A and B');
        return rec;
        }

The above, works if i have 2 checkboxes. But what if i have 3 checkboxes (or more). Should i have 9 if-else conditions for it to work ? Look at the following prototype, it is only for 3 checkboxes, and i have like 6 or 7 then i should have 36 – 49 if-else conditions ? I am having a logic issue can someone help me ?

if (A){
// display A
} else if (B) {
// display B
} else if (C) {
//display C
} else if (A and B) {
//display A and B
} else if (A and C) {
// display A and C
} else if (B and C) {
//display B and C
} else {
// display all
}

Answer 1

No, that would not be a good idea. Here’s an example, it only goes up to ‘E’ but the example scales:

Ext.require('*');

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: ['name', 'filterField']
})

Ext.onReady(function(){

    var active = [];

    function onBoxChange() {
        active = [];
        form.items.each(function(item){
            if (item.checked) {
                active.push(item.inputValue);
            }        
        });
        updateGrid();
    }

    function updateGrid() {
        store.suspendEvents();
        store.clearFilter();
        store.filterBy(function(rec){
            return Ext.Array.indexOf(active, rec.get('filterField')) > -1;
        });
        store.resumeEvents();
        grid.getView().refresh();
    }

    var items = [];

    Ext.Array.forEach(['A', 'B', 'C', 'D', 'E'], function(name){
        items.push({
            boxLabel: name,
            xtype: 'checkbox',
            inputValue: name,
            checked: true,
            listeners: {
                change: onBoxChange
            }
        });
    });

    var form = new Ext.form.Panel({
        flex: 1,
        items: items
    });

    var store = new Ext.data.Store({
        model: MyModel,
        data: [{
            name: 'A1',
            filterField: 'A'
        }, {
            name: 'A2',
            filterField: 'A'
        }, {
            name: 'A3',
            filterField: 'A'
        }, {
            name: 'B1',
            filterField: 'B'
        }, {
            name: 'B2',
            filterField: 'B'
        }, {
            name: 'C1',
            filterField: 'C'
        }, {
            name: 'C2',
            filterField: 'C'
        }, {
            name: 'C3',
            filterField: 'C'
        }, {
            name: 'D1',
            filterField: 'D'
        }, {
            name: 'E1',
            filterField: 'E'
        }, {
            name: 'E2',
            filterField: 'E'
        }, {
            name: 'E3',
            filterField: 'E'
        }, {
            name: 'E4',
            filterField: 'E'
        }]
    });

    var grid = new Ext.grid.Panel({
        flex: 1,
        store: store,
        columns: [{
            dataIndex: 'name',
            text: 'Name'
        }]
    });

    new Ext.container.Viewport({
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [form, grid]
    });

});