How to filter the ExtJS Grid data based on the input value ie value entered in textfield.
Step 1:
Write a keylistener function for the textfield which get trigged on keypress event.
.........
..........
xtype: 'textfield',
fieldLabel: 'School Name',
name: 'schoolName',
id: 'schoolNameTxt',
enableKeyEvents: true,
listeners: {
keyup: function (obj, e) {
var searchValue= obj.getValue(); //value entered by the user
Ext.getCmp('schoolListGrid').getStore().clearFilter();
// here 'schoolListGrid' is the id of the grid which data need to get
filtered.
//filter( field, value, [anyMatch], [caseSensitive], [exactMatch] )
Ext.getCmp('schoolListGrid').getStore().filter("schoolName",
searchValue,true,false,false);
// "schoolName" is name of the field in grid , to filter the grid data
},
blur: function(obj) {
obj.setValue(""); // to reset the text field on lost focus
}
}
Sample Working Code Example :
Grid to be filtered:
var grid = new Ext.grid.GridPanel( {
store : data,
id:'schoolListGrid',
defaults: {
width: 100,
sortable: true
},
columns : [{
id : 'schoolName',
header : 'School Name',
width : 200,
hidden:false,
sortable : true,
dataIndex : 'schoolName',
renderer: function(value, metaData, record) {
var schoolID = parseInt(record.data.schoolID);
var schoolName = record.data.schoolName;
}
}, {
id : 'schoolID',
header : 'School ID',
width : 100,
hidden:false,
sortable : true,
dataIndex : 'schoolID',
renderer: function(value, metaData, record) {
var schoolID = parseInt(record.data.schoolID);
var schoolName = record.data.schoolName;
var returnText =value;
// var shFunc = "javascript:showSchoolDetails("+schoolID + ",'" +schoolName +"')";
// returnText = '<a class="anchor_u_style" href="' + shFunc +'" >' + value + '</a>';
return returnText;
}
},{
id : 'schoolType',
header : 'Type',
width : 100,
sortable : true,
dataIndex : 'schoolType'
}, {
id : 'state',
header : 'State/Province',
width : 150,
sortable : true,
dataIndex : 'state'
},........
stripeRows : true,
frame:false,
autoExpandColumn : 'schoolName',
height : 400,
width:1100,
columnLines: true,
sm:sm,
iconCls:'icon-grid',
enableColumnHide: false,
// config options for stateful behavior
stateful : false,
stateId : 'grid'
});
Function to populate the search criteria panel
**
* populate the search panel for searching the schools based on school name
*/
function populateFilterData() {
//Ext.get('fliter-form-panel').dom.innerHTML ="";
var search_Panel = new Ext.FormPanel({
id: 'fliter-form-panel',
title:'Search Criteria',
labelWidth: 100, // label settings here cascade unless overridden
labelSeparator: '',
frame: true,
border:true,
width:1100,
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
renderTo:'filter_form_Panel',
items: [{
layout: 'column',
items: [
{
columnWidth: .25,
layout: 'form',
items:[{
xtype: 'textfield',
fieldLabel: 'School Name',
name: 'schoolName',
id: 'schoolNameTxt',
enableKeyEvents: true,
listeners: {
keyup: function (obj, e) {
var searchValue= obj.getValue();
Ext.getCmp('schoolListGrid').getStore().clearFilter();
//filter( field, value, [anyMatch], [caseSensitive], [exactMatch] )
Ext.getCmp('schoolListGrid').getStore().filter("schoolName", searchValue,true,false,false);
},
blur: function(obj) {
obj.setValue("");
}
}
}]
},
{
columnWidth: .25,
layout: 'form',
items:[{
xtype: 'textfield',
fieldLabel: 'School ID',
name: 'schoolID',
id: 'schoolIDTxt',
enableKeyEvents: true,
listeners: {
keyup: function (obj, e) {
var searchValue= obj.getValue();
Ext.getCmp('schoolListGrid').getStore().clearFilter();
//filter( field, value, [anyMatch], [caseSensitive], [exactMatch] )
Ext.getCmp('schoolListGrid').getStore().filter("schoolID",
searchValue,true,false,false);
},
blur: function(obj) {
obj.setValue("");
}
}
}]
},
{
columnWidth: .25,
layout: 'form',
items:[{
xtype: 'textfield',
fieldLabel: 'School Type',
name: 'schoolType',
id: 'schoolTypeTxt',
enableKeyEvents: true,
listeners: {
keyup:
function (obj, e)
{
var searchValue= obj.getValue();
Ext.getCmp('schoolListGrid').getStore().clearFilter();
//filter( field, value, [anyMatch], [caseSensitive], [exactMatch] )
Ext.getCmp('schoolListGrid').getStore().filter("schoolType",
searchValue,true,false,false);
},
blur: function(obj) {
obj.setValue("");
}
}
}]
},
{
columnWidth: .25,
layout: 'form',
items:[{
xtype: 'textfield',
fieldLabel: 'State/Province',
name: 'state',
id: 'schoolStateTxt',
enableKeyEvents: true,
listeners: {
keyup:
function (obj, e)
{
var searchValue= obj.getValue();
Ext.getCmp('schoolListGrid').getStore().clearFilter();
//filter( field, value, [anyMatch], [caseSensitive], [exactMatch] )
Ext.getCmp('schoolListGrid').getStore().filter("state",
searchValue,true,false,false);
},
blur: function(obj) {
obj.setValue("");
}
}
}]
}
]
}
]
});
}
Step 2 :
Step 1:
Write a keylistener function for the textfield which get trigged on keypress event.
.........
..........
xtype: 'textfield',
fieldLabel: 'School Name',
name: 'schoolName',
id: 'schoolNameTxt',
enableKeyEvents: true,
listeners: {
keyup: function (obj, e) {
var searchValue= obj.getValue(); //value entered by the user
Ext.getCmp('schoolListGrid').getStore().clearFilter();
// here 'schoolListGrid' is the id of the grid which data need to get
filtered.
//filter( field, value, [anyMatch], [caseSensitive], [exactMatch] )
Ext.getCmp('schoolListGrid').getStore().filter("schoolName",
searchValue,true,false,false);
// "schoolName" is name of the field in grid , to filter the grid data
},
blur: function(obj) {
obj.setValue(""); // to reset the text field on lost focus
}
}
Sample Working Code Example :
Grid to be filtered:
var grid = new Ext.grid.GridPanel( {
store : data,
id:'schoolListGrid',
defaults: {
width: 100,
sortable: true
},
columns : [{
id : 'schoolName',
header : 'School Name',
width : 200,
hidden:false,
sortable : true,
dataIndex : 'schoolName',
renderer: function(value, metaData, record) {
var schoolID = parseInt(record.data.schoolID);
var schoolName = record.data.schoolName;
}
}, {
id : 'schoolID',
header : 'School ID',
width : 100,
hidden:false,
sortable : true,
dataIndex : 'schoolID',
renderer: function(value, metaData, record) {
var schoolID = parseInt(record.data.schoolID);
var schoolName = record.data.schoolName;
var returnText =value;
// var shFunc = "javascript:showSchoolDetails("+schoolID + ",'" +schoolName +"')";
// returnText = '<a class="anchor_u_style" href="' + shFunc +'" >' + value + '</a>';
return returnText;
}
},{
id : 'schoolType',
header : 'Type',
width : 100,
sortable : true,
dataIndex : 'schoolType'
}, {
id : 'state',
header : 'State/Province',
width : 150,
sortable : true,
dataIndex : 'state'
},........
stripeRows : true,
frame:false,
autoExpandColumn : 'schoolName',
height : 400,
width:1100,
columnLines: true,
sm:sm,
iconCls:'icon-grid',
enableColumnHide: false,
// config options for stateful behavior
stateful : false,
stateId : 'grid'
});
Function to populate the search criteria panel
**
* populate the search panel for searching the schools based on school name
*/
function populateFilterData() {
//Ext.get('fliter-form-panel').dom.innerHTML ="";
var search_Panel = new Ext.FormPanel({
id: 'fliter-form-panel',
title:'Search Criteria',
labelWidth: 100, // label settings here cascade unless overridden
labelSeparator: '',
frame: true,
border:true,
width:1100,
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
renderTo:'filter_form_Panel',
items: [{
layout: 'column',
items: [
{
columnWidth: .25,
layout: 'form',
items:[{
xtype: 'textfield',
fieldLabel: 'School Name',
name: 'schoolName',
id: 'schoolNameTxt',
enableKeyEvents: true,
listeners: {
keyup: function (obj, e) {
var searchValue= obj.getValue();
Ext.getCmp('schoolListGrid').getStore().clearFilter();
//filter( field, value, [anyMatch], [caseSensitive], [exactMatch] )
Ext.getCmp('schoolListGrid').getStore().filter("schoolName", searchValue,true,false,false);
},
blur: function(obj) {
obj.setValue("");
}
}
}]
},
{
columnWidth: .25,
layout: 'form',
items:[{
xtype: 'textfield',
fieldLabel: 'School ID',
name: 'schoolID',
id: 'schoolIDTxt',
enableKeyEvents: true,
listeners: {
keyup: function (obj, e) {
var searchValue= obj.getValue();
Ext.getCmp('schoolListGrid').getStore().clearFilter();
//filter( field, value, [anyMatch], [caseSensitive], [exactMatch] )
Ext.getCmp('schoolListGrid').getStore().filter("schoolID",
searchValue,true,false,false);
},
blur: function(obj) {
obj.setValue("");
}
}
}]
},
{
columnWidth: .25,
layout: 'form',
items:[{
xtype: 'textfield',
fieldLabel: 'School Type',
name: 'schoolType',
id: 'schoolTypeTxt',
enableKeyEvents: true,
listeners: {
keyup:
function (obj, e)
{
var searchValue= obj.getValue();
Ext.getCmp('schoolListGrid').getStore().clearFilter();
//filter( field, value, [anyMatch], [caseSensitive], [exactMatch] )
Ext.getCmp('schoolListGrid').getStore().filter("schoolType",
searchValue,true,false,false);
},
blur: function(obj) {
obj.setValue("");
}
}
}]
},
{
columnWidth: .25,
layout: 'form',
items:[{
xtype: 'textfield',
fieldLabel: 'State/Province',
name: 'state',
id: 'schoolStateTxt',
enableKeyEvents: true,
listeners: {
keyup:
function (obj, e)
{
var searchValue= obj.getValue();
Ext.getCmp('schoolListGrid').getStore().clearFilter();
//filter( field, value, [anyMatch], [caseSensitive], [exactMatch] )
Ext.getCmp('schoolListGrid').getStore().filter("state",
searchValue,true,false,false);
},
blur: function(obj) {
obj.setValue("");
}
}
}]
}
]
}
]
});
}
Step 2 :
