フィルターを実装する方法に基づいて、remoteSort: false
ヒントとして使用していると思います。フィルターのインスタンスを作成する必要はなく、構成を提供するだけです。できればスペアthis
。ほとんどのイベントはコンポーネントのインスタンスを提供し、代わりにそれを使用しますthis
。それはあなたの頭痛を救うことができます。
私はそれをテストし、それは動作します。簡単な例を次に示します。
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Lisam', "email":"lisa@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
tbar: [{
text: 'filter',
handler: function(btn) {
var g = btn.up('grid');
g.store.filter([{property: "name", anyMatch: true, value: 'Lisa'},{property: "email", anyMatch: true, value: 'lisa@simpsons.com'}])
}
}],
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
ここにJSFiddleがあります
テキストフィールド付きのバージョン 2
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Lisam', "email":"lisa@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
tbar: [{
xtype: 'textfield',
emptyText: 'filter',
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
var g = field.up('grid'),
value = field.getValue();
g.store.filter({scope: this, filterFn: function(rec) {
var rege = new RegExp(".*" + value + ".*");
if (rege.test(rec.data.name) || rege.test(rec.data.email)) {
return true;
}
return false;
}
});
}
}
}
}],
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
そしてJSFiddle