How to add search filter in Grid Panel using EXTJS

To get the search filter in your Grid Panel, do the following steps

1) Add following scripts and css in your html.

<link href="../css/css/icons.css" rel="stylesheet" type="text/css"></link>
<link href="./img/extjs.ico" rel="shortcut icon"></link>
<script src="../javascript/js/Ext.ux.ThemeCombo.js" type="text/javascript">
</script>
<script src="../javascript/js/Ext.ux.grid.Search.js" type="text/javascript">
</script>

 Add the following code in your Grid Panel as a plugin:

,plugins:[new Ext.ux.grid.Search({
                iconCls:'icon-zoom'
                ,readonlyIndexes:['country']
                ,disableIndexes:['pctChange']
                ,minChars:1
                ,autoFocus:true
                ,mode:'local' // to filter on local; for remote add mode:'remote'
                ,width: '50'
            })],

Download the required css and javascript from here.

For more information check this link:
http://gridsearch.extjs.eu/