需要帮助筛选具有多个值的网格。
我正在尝试创建具有许多电话价值的menucheckitem。 并根据已检查的电话筛选网格。
通过使用以下代码,我能够根据单个值过滤网格。
store.filter([{
property: 'type',
value: value
}]);
现在,即使我选择了很多电话复选框,我也想过滤网格。 我尝试使用store.filterBy()。但是,工作不正常,我不知道自己在做什么错。
var test = [“ 111-222-333”,“ 111-222-334”,“ 111-222-335”]
store.filterBy(function(record, val){
return test.indexOf(record.get('phone')) != -1
}
});
这仅过滤第一个值,即仅过滤“ 111-222-333”值。不过滤测试中的所有其他值。
在此处找到示例代码- https://fiddle.sencha.com/#view/editor&fiddle/2ll7
答案 0 :(得分:0)
所以我分叉了你的小提琴,重新制作了它,我想我已经实现了你想要的。首先,您在menucheckitem
中对bbar
的定义有点奇怪。我认为您需要一个包含复选框的电话列表,但是该列表取决于商店记录,因此需要动态构建(就像我在afterrender
中所做的那样)。实际上,这必须在商店的load
事件内部,但在示例中并未触发(也许bcz这是商店的内存类型)。无论如何,当您复制代码时,都需要将所有afterrender
内容放入商店load
事件中。
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: {
fields: ['name', 'email', 'phone', 'type'],
data: [{
name: 'Marge',
email: 'marge@simpsons.com',
phone: '111-222-334',
type: 'Foo'
}, {
name: 'Homer',
email: 'homer@simpsons.com',
phone: '111-222-333',
type: 'Foo'
}, {
name: 'Marge',
email: 'marge@simpsons.com',
phone: '111-222-334',
type: 'Foo'
}, {
name: 'Bart',
email: 'bart@simpsons.com',
phone: '111-222-335',
type: 'Bar'
}, {
name: 'Bart',
email: 'bart@simpsons.com',
phone: '111-222-335',
type: 'Bar'
}, {
name: 'Lisa',
email: 'lisa@simpsons.com',
phone: '111-222-336',
type: 'Bar'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
text: 'Type',
dataIndex: 'type'
}],
listeners: {
afterrender: function (grid) {
var store = grid.store;
var phones = store.getData().items.map(function (r) { //get the phones
return r.get('phone');
});
var phonesFiltered = [];
phones.forEach(function (p) { //filter them to make records unique
if (!phonesFiltered.includes(p)) {
phonesFiltered.push(p);
}
});
var items = [];
phonesFiltered.forEach(function (p) { //create `menucheckitem` items with phone names and attaching `checkchange` event
items.push({
xtype: 'menucheckitem',
text: p,
listeners: {
checkchange: function (checkbox, checked, eOpts) {
var menu = checkbox.up('menu');
var filterPhones = [];
menu.items.items.forEach(function (c) { //get all checked `menucheckitem`-s
if (c.checked) {
filterPhones.push(c.text);
}
});
var store = checkbox.up('grid').store;
store.clearFilter();
if (filterPhones.length > 0) {
store.filterBy(function (record) {
return this.filterPhones.indexOf(record.get('phone')) !== -1;
}, {
filterPhones: filterPhones
});
}
}
}
});
});
//
Ext.getCmp('toolbarId').add({
xtype: 'menu',
// height: 120,
floating: false,
items: items
});
}
},
bbar: {
xtype: 'toolbar',
height: 200,
id: 'toolbarId'
},
renderTo: Ext.getBody()
});
}
});