我有2 checkboxes
,名为A
和B
。当我点击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
}
答案 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]
});
});