0

私は 2 を持っています。checkboxesそれは と と呼ばれAていBます。をクリックするとcheckbox A、その中の特定のすべてが、その値を含むすべての値をフィルタリングfieldする必要があります。GridA

をクリック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
}
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 に答える