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 :

Enable the text selection in grid panels of EXtjs3.4

Enabling the text selection in grid panels in extJS3.4

Step 1:   Include the following scripts into the js files.

/**
 * to enable the text selection in grid panels
 */   
if (!Ext.grid.GridView.prototype.templates) {

    Ext.grid.GridView.prototype.templates = {};
}
Ext.grid.GridView.prototype.templates.cell = new Ext.Template(
    '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',
    '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
    '</td>'
);


Step 2: Include the following styles into your style sheet or the page


Style sheet:

.x-selectable, .x-selectable * {
-moz-user-select: text!important;
-khtml-user-select: text!important;
}   

or jsp page

<style>

.x-selectable, .x-selectable * {
-moz-user-select: text!important;
-khtml-user-select: text!important;
}   


</style>