See Extension only
Source Code
<!-- FilterRow ux Start-->
<link rel="stylesheet"		href="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/ext3/ux/filterRow/filterRow.css" type="text/css"/>
<script type="text/javascript" 	src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/ext3/ux/filterRow/filterRow.js"></script>
<!-- FilterRow ux End-->
<script type="text/javascript">
Ext.onReady(function(){	
	var sampleGridColumns= [{
		header: 'Id',
		width:90,
		dataIndex: 'id',
		clearFilter:true//used to show clear filter icon in this column
	},{
		header: 'Title', 
		dataIndex: 'title',
		sortable: true,
		width:150,
		filterInput: new Ext.form.TextField(),
		filterOptions:[{value:'startwith', text:'Start With'},{value:'endwith', text:'End With'},{value:'contain', text:'Contain'},{value:'doesnotcontain', text:'Does Not Contain'}]
	},{
		header: 'Alias', 
		dataIndex: 'alias',
		sortable: true,
		width:230,
		filterInput: new Ext.form.TextField(),
		filterOptions:[{value:'startwith', text:'Start With'},{value:'endwith', text:'End With'},{value:'contain', text:'Contain'},{value:'doesnotcontain', text:'Does Not Contain'}]
	},{
		header: 'Created',
		width:130,
		dataIndex: 'created_date',
		filterInput: new Ext.form.DateField({format:'Y-m-d',  dataIndex:'created' /* you can pass different dataIndex for filtering into all filter inputs */}),
		filterOptions:[{value:'before', text:'Before'},{value:'after', text:'After'},{value:'contain', text:'Is'}]
	},{
		header: 'Published', 
		dataIndex: 'state',
		sortable: true,
		renderer:function(v){if(v==1){return 'Published'}else{return '<span style="color:red">UnPublished</span>'}},
		filterInput	:  new Ext.form.ComboBox({				
			displayField	: 'name',
			valueField		: 'state',
			triggerAction	: 'all',		
			typeAhead		: false,				
			mode			: 'local',
			listWidth		: 160,
			hideTrigger		: false,
			emptyText		: 'Select',
			store			:[['1','Published'],['0','UnPublished']]
		}),
		filterOptions:[{value:'equal', text:'Is'},{value:'notequal', text:'Not'}]
	}];
	
	var sampleGridReader = new Ext.data.JsonReader({
			totalProperty: 'total',
			successProperty: 'success',
			idProperty: 'id',
			root: 'data'
		},[
			{name: 'id'},
			{name: 'title'},
			{name: 'created'},
			{name: 'state'},
			{name: 'alias'},
			{name: 'created_date'}			
	]);
	
	var filterRow = new Ext.ux.grid.FilterRow();
	
	// Typical Store collecting the Proxy, Reader and Writer together.
	var sampleGridStore = new Ext.data.Store({
		reader		: sampleGridReader,
		autoLoad	: true,	
		url			: scriptUrl+'ux/filterRow/example/index.php'
	});
	
	// create the Grid
	var grid = new Ext.grid.GridPanel({
		store: sampleGridStore,
		renderTo:'filterRowGridExample',
		columns: sampleGridColumns,
		plugins: [filterRow],
		stripeRows: true,
		height: 350,
		title: 'Grid with Filters'
	});

});
</script>
<h1 class="extensionHeading">Ext Grid Filter Row Example</h1>
<p>This example shows how to use a Filter Row.</p>
<p>You can add any kind of input filter like DropDown/Combobox, Textfield, NumberField, DateField Etc</p>
<p>
And You can clear all filters by one click<br />
<img src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/ext3/ux/filterRow/images/clearfilterOption.png" style="border:2px double #4B6A34"  /><br /><br />
You can choose more options from RHS DropDown menu as Show below
<br /><br /> <img src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/ext3/ux/filterRow/images/moreOptions.png" style="border:2px double #4B6A34"  />

</p>
<p><br /></p>
<div id="filterRowGridExample"></div>

	
Ext.onReady(function(){	
	var sampleGridColumns= [{
		header: 'Id',
		width:90,
		dataIndex: 'id',
		clearFilter:true//used to show clear filter icon in this column
	},{
		header: 'Title', 
		dataIndex: 'title',
		sortable: true,
		width:150,
		filterInput: new Ext.form.TextField(),
		filterOptions:[{value:'startwith', text:'Start With'},{value:'endwith', text:'End With'},{value:'contain', text:'Contain'},{value:'doesnotcontain', text:'Does Not Contain'}]
	},{
		header: 'Alias', 
		dataIndex: 'alias',
		sortable: true,
		width:230,
		filterInput: new Ext.form.TextField(),
		filterOptions:[{value:'startwith', text:'Start With'},{value:'endwith', text:'End With'},{value:'contain', text:'Contain'},{value:'doesnotcontain', text:'Does Not Contain'}]
	},{
		header: 'Created',
		width:130,
		dataIndex: 'created_date',
		filterInput: new Ext.form.DateField({format:'Y-m-d',  dataIndex:'created' /* you can pass different dataIndex for filtering into all filter inputs */}),
		filterOptions:[{value:'before', text:'Before'},{value:'after', text:'After'},{value:'contain', text:'Is'}]
	},{
		header: 'Published', 
		dataIndex: 'state',
		sortable: true,
		renderer:function(v){if(v==1){return 'Published'}else{return '<span style="color:red">UnPublished</span>'}},
		filterInput	:  new Ext.form.ComboBox({				
			displayField	: 'name',
			valueField		: 'state',
			triggerAction	: 'all',		
			typeAhead		: false,				
			mode			: 'local',
			listWidth		: 160,
			hideTrigger		: false,
			emptyText		: 'Select',
			store			:[['1','Published'],['0','UnPublished']]
		}),
		filterOptions:[{value:'equal', text:'Is'},{value:'notequal', text:'Not'}]
	}];
	
	var sampleGridReader = new Ext.data.JsonReader({
			totalProperty: 'total',
			successProperty: 'success',
			idProperty: 'id',
			root: 'data'
		},[
			{name: 'id'},
			{name: 'title'},
			{name: 'created'},
			{name: 'state'},
			{name: 'alias'},
			{name: 'created_date'}			
	]);
	
	var filterRow = new Ext.ux.grid.FilterRow();
	
	// Typical Store collecting the Proxy, Reader and Writer together.
	var sampleGridStore = new Ext.data.Store({
		reader		: sampleGridReader,
		autoLoad	: true,	
		url			: scriptUrl+'ux/filterRow/example/index.php'
	});
	
	// create the Grid
	var grid = new Ext.grid.GridPanel({
		store: sampleGridStore,
		renderTo:'filterRowGridExample',
		columns: sampleGridColumns,
		plugins: [filterRow],
		stripeRows: true,
		height: 350,
		title: 'Grid with Filters'
	});

});
<?php
    error_reporting
(E_ALL&~E_NOTICE);
    include(
'db.php');
    
    
/**
     * Gets Atricals from the com_extensiondemo_content table by filtering them accroding to $filter option
     *
     * @param $filter  as array ('name'=>"John", "name_filterOption"=>'startwith', 'email'=>'@yahoo.com', "email_filterOption"=>'endwith')
     *
     * @access public
     * @return records found
     */
    
function filteredMembers$filter ="" ){
        
$where     " WHERE ";
        
$where .= buildFilterCondition($filter);                
        
        
$sql "SELECT *, DATE_FORMAT(created, '%b %e, %Y') as created_date FROM com_extensiondemo_content  ".$where;
        if( 
$offset ){
            
$sql .= " LIMIT ".intval($start).",".intval($offset);
        }
                
        
$return  loadObjectlist($sql);
        return  
$return;
    }
    
    
/**
     * build the filter condition for query
     *
     * @param $filter  as array ('name'=>"John", "name_filterOption"=>'startwith', 'email'=>'@yahoo.com', "email_filterOption"=>'endwith')
     *
     * @access public
     * @return filter as string 
     */
    
function buildFilterCondition($filter){
        
$where    ' 1=1 ';
        if( 
$filter && is_array($filter) && count($filter) ){
            foreach(
$filter as $fieldIndex=>$val){
                if( 
substr($fieldIndex, -12 ) == 'filterOption' ){
                    
$fieldName     str_replace('_filterOption'''$fieldIndex);
                    
$fieldValue $filter[$fieldName];
                    if(
$fieldValue===''){
                        continue;
                    }
                    
                    switch(
$val){
                        case 
'startwith':
                            
$where .= " AND {$fieldName} like '{$fieldValue}%' ";
                        break;
                        case 
'endwith':
                            
$where .= " AND {$fieldName} like '%{$fieldValue}' ";
                        break;
                        case 
'doesnotcontain':
                            
$where .= " AND {$fieldName} NOT like '%{$fieldValue}%' ";
                        break;
                        case 
'equal':
                            
$where .= " AND {$fieldName} = '{$fieldValue}' ";
                        break;
                        case 
'notequal':
                            
$where .= " AND {$fieldName} <> '{$fieldValue}' ";
                        break;
                        case 
'before':
                            
$where .= " AND {$fieldName} < '{$fieldValue}' ";
                        break;
                        case 
'after':
                            
$where .= " AND {$fieldName} > '{$fieldValue}' ";
                        break;
                        case 
'NoFilter':
                        break;
                        default:
                        case 
'contain':
                            
$where .= " AND {$fieldName} like '%{$fieldValue}%' ";
                        break;
                    }
                }
            } 
        }        
        return 
$where;
    }
    
    
    
$filter                $_REQUEST['filter'];
    
$rows                filteredMembers($filter);
    
$result             = new stdClass();
    
$result->data        $rows;
    
$result->total        count($rows);
    
$result->success    true;
    echo 
$json             =  json_encode($result);    

?>