javascript - Grid filter with textfield extjs -
does me? i've created grid , add filter on outside textfield, on 1 filter runs when add textfield doesn't run, when first textfield blur, filter doesn't run. bellow code:
filtergrid = function (property, value) { var grid = ext.getcmp('grid'); grid.store.clearfilter(); if (value) { var matcher = new regexp(ext.string.escaperegex(value), "i"); grid.store.filter({ filterfn: function (record) { return matcher.test(record.get(property)); } }); } }; var grid = new ext.panel({ layout: 'border', renderto: ext.getbody(), height: 500, items: [{ xtype: 'form', region: 'north', id: 'formpanel', bodypadding: 10, height: 75, collapsible: true, layout: 'hbox', items: [{ xtype: 'textfield', fieldlabel: 'name', labelalign: 'right', id: 'name', listeners: { change: function (field, value) { filtergrid('name', value); } } }, { xtype: 'textfield', fieldlabel: 'email', labelalign: 'right', id: 'email', listeners: { change: function (field, value) { filtergrid('email', value); } } }, { xtype: 'textfield', fieldlabel: 'phone', labelalign: 'right', id: 'phone', listeners: { change: function (field, value) { filtergrid('phone', value); } } }, { xtype: 'textfield', fieldlabel: 'type', labelalign: 'right', id: 'type', listeners: { change: function (field, value) { filtergrid('type', value); } } }] }, { xtype: 'grid', region: 'center', searchvalue: null, matches: [], currentindex: null, searchregexp: null, casesensitive: false, regexpmode: false, matchcls: 'x-livesearch-match', defaultstatustext: 'nothing found', id: 'grid', store: { fields: ['name', 'email', 'phone', 'type'], data: [{ 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-221-335', type: 'bar' }, { name: 'lisa', email: 'lisa@simpsons.com', phone: '111-221-336', type: 'bar' }] }, columnlines: true, columns: [{ text: 'name', dataindex: 'name', flex: 1 }, { text: 'email', dataindex: 'email', flex: 1 }, { text: 'phone', dataindex: 'phone', flex: 1 }, { text: 'type', dataindex: 'type', flex: 1 }], }] });
kind regards
in filtergrid function, clearing filters using grid.store.clearfilter();
, creating single filter property corresponds textfield changed. means there single filter applied store @ time.
one way approach remove filter applied particular property instead of clearing filters. can add (or re-add) filter changed property. need identify filters. example: grid.store.filters.getat(grid.store.filters.length-1).property=property;
tag each filter name of property used create it. enable remove specific filter using
grid.store.filters.each(function(item) { if (item.property === property) { grid.store.removefilter(item); } })
and add filter using
grid.store.addfilter({ filterfn: function (record) { return matcher.test(record.get(property)); } });
see fiddle here: https://fiddle.sencha.com/#fiddle/1k74
Comments
Post a Comment