Data Filter feature in ExtJS 3.4 Grid panel based on input value(text field)

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 :