從複選框獲取值 - 邏輯問題

Question

我有2 checkboxes，其名爲A和B。當我點擊checkboxA時，Grid中的所有特定field應該過濾所有值，其中值爲A。

如果我點擊B，那麼grid中的filed應該過濾並顯示其中有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 
} 

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

});