从复选框获取值 - 逻辑问题

时间:2012-07-23 06:56:54

标签: extjs4 extjs4.1

我有2 checkboxes,名为AB。当我点击checkbox A时,field中的所有特定Grid都应过滤其中包含值A的所有值。< / p>

如果我点击B,则filed中的grid应过滤并显示其中包含B的所有值。

如果我同时点击两者,则应显示A and B

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

以上,如果我有2个复选框,则有效。但是,如果我有3个复选框(或更多),该怎么办?我应该有9个if-else条件才能工作吗?看看下面的原型,它只有3个复选框,我喜欢6或7然后我应该有36 - 49 if-else条件?我有逻辑问题可以有人帮助我吗?

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
}

1 个答案:

答案 0 :(得分:1)

不,那不是个好主意。这是一个例子,它只能达到'E',但示例缩放:

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

});