Live Search on Grid --ExtJs - extjs

Question

I am new to ExtJs, and i am playing around to build logic to perform "live search" on Grid columns.
From the code below i am able to populate data into the grid but cannot make live search functionality. i am not sure where i am missing the logic.
Ext.define('abc.view.EmployeePanel', {
extend: 'Ext.window.Window',
alias: 'widget.EmployeePanel',
requires: [
'Ext.tab.Panel',
'Ext.form.*'],
constructor: function () {
this.callParent(arguments);
},
this. employeePopUPGridStore = new Ext.data.ArrayStore({
fields: [
{
name: 'empid',
type: 'number'
},
{
name: 'fname',
type: 'string'
},
{
name: 'lname',
type: 'string'
},
],
});
this.employeePopUPGridStore.loadData(localAr, false);
this.down('#addempgrid').bindStore(this.employeePopUPGridStore);
this.down('#addempgrid').getView().refresh();
},
items: [{
xtype:'textfield',
name:'search',
itemId:'search',
emptyText:'Search by First Name / Last Name',
listeners: {
onTextFieldChange: function(field, newValue, oldValue, eOpts){
var grid = field.down('addempgrid');
grid.store.clearFilter();
if (newValue) {
var matcher = new RegExp(Ext.String.escapeRegex(newValue), "i");
grid.store.filter({
filterFn: function(item) {
return matcher.test(item.get('empid')) ||
matcher.test(item.get('fname')) ||
matcher.test(item.get('job'));
}
});
}
}
}
},
{
xtype: 'gridpanel',
itemId: 'addempgrid',
autoHeight: true,
columns: [
{
header: "Employee ID",
flex: 1,
dataIndex: 'empid',
},
{
header: "Full Name",
flex: 3,
dataIndex: 'fname'
},
{
header: "LastName",
flex: 1,
dataIndex: 'lname'
},
]
}
] }
});
Any help around is much appreciated.

Answer 1

Hi Please try this way once..
{
xtype: 'textfield',
itemId: 'searchBar',
cls: 'search-bar',
width: 230,
margin: '0 0 0 10',
listeners: {
buffer: 250,
scope: this,
change: function (field, newVal) {
var grid = field.down('addempgrid');
grid.store.clearFilter();
if (newValue) {
var matcher = new RegExp(Ext.String.escapeRegex(newValue), "i");
grid.store.filter({
filterFn: function(item) {
return matcher.test(item.get('empid')) ||
matcher.test(item.get('fname')) ||
matcher.test(item.get('job'));
}
});
}
}
}
}
Hope it helps you