您好我正在尝试使用商店filterBy函数，但我无法让它按我的意愿工作。 我有四个按钮（A B C D）和一个包含与按钮相关的所有数据的列表 当我点击按钮时，我应该相应地过滤 注意： - 当我点击A时，我应该得到A的记录 当我点击B时，我应该将A的记录附加到A的记录列表 所以当我点击按钮时，我应该有一个按钮ID数组，并使用这些id过滤列表。
filterList:function (list, index, target, record){
var categories=[];
categories.push(record.get('id'));
for(c=0;c<categories.length;c++)
{
Ext.getStore('mystore').filterBy(function(record){
var id = record.get('id');
if(id==categories[c])
{
return true;
}
});
}
}
感谢任何帮助。
答案 0 :(得分：1)
filterBy返回功能应始终返回boolean value。您只返回true，而不是false。除此之外，filtering中store为loop，参数record存在两次（作为函数中的参数filterBy 的返回函数中的filterList 和。
我创建了一个Fiddle来向您展示我想出的位置。我知道它是ExtJs而不是Sencha Touch，但您会明白这一点。我将逐步完成所有逻辑的MainController。
我没有清理代码，所以有一些重复，但它只是一个概念。
首先，我在view上创建了一组按钮。看到我设置action property。
...
tbar: [{
text: 'Filter a',
action: 'a'
}, {
text: 'Filter b',
action: 'b'
}],
...
然后我将onClick事件绑定到按钮。在这种情况下，我使用action属性作为searchValue，但它当然可以是任何东西。
...
onClick: function(button, event, eOpts) {
var me = this,
grid = me.getMainGrid(),
store = grid.getStore(),
filters = store.getFilters(),
searchValue = button.action,
regex = RegExp(searchValue, 'i'),
filter = new Ext.util.Filter({
id: button.id,
filterFn: function(record) {
var match = false;
Ext.Object.each(record.data, function(property, value) {
match = match || regex.test(String(value));
});
return match;
}
});
if (filters.containsKey(button.id)) {
store.removeFilter(filter);
} else {
store.addFilter(filter);
}
},
...
魔法在filter instance。每次过滤时添加new filter instances，您都可以使用多个过滤器进行过滤。如果您按button a和button b，他们会互相尊重。在该过滤条件中，我使用regex搜索当前data的所有model。我配置id来识别过滤器，以便我可以在之后将其删除。
filter = new Ext.util.Filter({
id: button.id,
filterFn: function(record) {
var match = false;
Ext.Object.each(record.data, function(property, value) {
match = match || regex.test(String(value));
});
return match;
}
});
如果过滤器不存在，则会添加，否则将被删除。
if (filters.containsKey(button.id)) {
store.removeFilter(filter);
} else {
store.addFilter(filter);
}
我还创建了一个textfield来搜索所有数据。我没有添加和删除filters，而只是致电clearFilter并添加新的filter新searchvalue。
onKeyUp: function(textField, event, eOpts) {
this.filterStore(textField.getValue());
},
filterStore: function(searchValue) {
var me = this,
grid = me.getMainGrid(),
store = grid.getStore(),
regex = RegExp(searchValue, 'i');
store.clearFilter(true);
store.filter(new Ext.util.Filter({
filterFn: function(record) {
var match = false;
Ext.Object.each(record.data, function(property, value) {
match = match || regex.test(String(value));
});
return match;
}
}));
}
Ext.define('Filtering.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
refs: {
mainGrid: 'maingrid'
}
},
init: function() {
var me = this;
me.listen({
global: {},
controller: {},
component: {
'segmentedbutton': {
toggle: 'onToggle'
},
'toolbar > button': {
click: 'onClick'
},
'textfield': {
keyup: 'onKeyUp'
}
},
store: {
'*': {
metachange: 'onMetaChange',
filterchange: 'onFilterChange'
}
},
direct: {}
});
},
onLaunch: function() {
var store = Ext.StoreManager.lookup('Users') || Ext.getStore('Users');
store.load();
},
onMetaChange: function(store, metaData) {
var grid = this.getMainGrid(),
model = store.getModel(),
// metadata
fields = metaData.fields,
columns = metaData.columns,
gridTitle = metaData.gridTitle;
model.fields = fields;
grid.setTitle(gridTitle);
grid.reconfigure(store, columns);
},
onFilterChange: function(store, filters, eOpts) {
var me = this,
grid = me.getMainGrid();
grid.getSelectionModel().select(0);
},
/**
* Used for the segmented buttons
*/
onToggle: function(container, button, pressed) {
var me = this,
grid = me.getMainGrid(),
store = grid.getStore(),
//filters = store.getFilters(),
searchValue = button.action,
regex = RegExp(searchValue, 'i'),
filter = new Ext.util.Filter({
id: button.id,
filterFn: function(record) {
var match = false;
Ext.Object.each(record.data, function(property, value) {
match = match || regex.test(String(value));
});
return match;
}
});
if (pressed) {
store.addFilter(filter);
} else {
store.removeFilter(filter);
}
},
/**
* Used for the toolbar buttons
*/
onClick: function(button, event, eOpts) {
var me = this,
grid = me.getMainGrid(),
store = grid.getStore(),
filters = store.getFilters(),
searchValue = button.action,
regex = RegExp(searchValue, 'i'),
filter = new Ext.util.Filter({
id: button.id,
filterFn: function(record) {
var match = false;
Ext.Object.each(record.data, function(property, value) {
match = match || regex.test(String(value));
});
return match;
}
});
if (filters.containsKey(button.id)) {
store.removeFilter(filter);
} else {
store.addFilter(filter);
}
},
/**
* Used for the textfield
*/
onKeyUp: function(textField, event, eOpts) {
this.filterStore(textField.getValue());
},
filterStore: function(searchValue) {
var me = this,
grid = me.getMainGrid(),
store = grid.getStore(),
regex = RegExp(searchValue, 'i');
store.clearFilter(true);
store.filter(new Ext.util.Filter({
filterFn: function(record) {
var match = false;
Ext.Object.each(record.data, function(property, value) {
match = match || regex.test(String(value));
});
return match;
}
}));
}
});
Ext.define('Filtering.view.MainGrid', {
extend: 'Ext.grid.Panel',
xtype: 'maingrid',
tbar: [{
xtype: 'segmentedbutton',
allowMultiple: true,
items: [{
text: 'Filter a',
action: 'a'
}, {
text: 'Filter b',
action: 'b'
}]
}, {
text: 'Filter a',
action: 'a'
}, {
text: 'Filter b',
action: 'b'
}, {
xtype: 'textfield',
emptyText: 'Search',
enableKeyEvents: true
}],
//title: 'Users', // Title is set through the metadata
//store: 'Users', // we reconfigure the store in the metachange event of the store
columns: [] // columns are set through the metadata of the store (but we must set an empty array to avoid problems)
});
答案 1 :(得分：0)
假设您有两个切换按钮，并且您希望在切换这些按钮时过滤存储，
控制器
Ext.define('namespace',{
extend:'controller...',
config:{
refs:{
btnA:'#btnA',
btnB:'#btnB',
},
controls:{
btnA:{
change:'btnChange'
},
btnB:{
change:'btnChange'
}
}
},
btnChange:function(ths,val){
var btnA = this.getBtnA().getValue(),
btnB = this.getBtnB().getValue();
Ext.getStore('mystore').filterBy(function(r){
if(btnA && btnB){
return r.get('id') === btnA.getValue() || r.get('id') === btnB.getValue();
}else if(btnA){
return r.get('id') === btnA.getValue();
}else if(btnB){
return r.get('id') === btnB.getValue();
}
return false;
});
}
});