0

我有 2 checkboxes，它被称为Aand B。当我点击 时checkbox A，所有特定的 afield都Grid应该过滤所有带有值的值A。

如果我单击，B则应该过滤并显示其中的所有值。filedgridB

如果我同时单击两者，则两者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
}
4

1 回答 1

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

});
于 2012-07-23T08:13:45.180 回答