Sorry about that, I didn't send the hole implementation...

You could use the following code :
Code:
Ext.create('Ext.grid.Panel', {
	plugins: [ Ext.create('Ext.ux.grid.FilterRow') ],
	store: Ext.create('Ext.data.Store', {
		pageSize:25,
		remoteSort:true,
	    fields:[
			'id',
			'siteId',
			'firstName',
			'lastName',
			'company',
			'birthday'
		],
		proxy:{
	        type:'direct',
	        directFn:Progik.Remote.Contacts.read,
			reader:{
	            type:'json',
	            root:'rows',
	            successProperty:'success',
				idProperty:'id',
				totalProperty:'total'
	        }
	    }	    
  	}),
  	columns:[
		{ header:'#', dataIndex:'id', nofilter:{}},
		{ 
			header:'siteId', 
			dataIndex:'siteId',
			filter:{
				xtype:'combo',
				queryMode: 'local',
				displayField: 'name',
				valueField: 'id',
				store:Ext.create('Ext.data.Store', {
					fields:['id', 'name'],
					data:[{
						id:'0', name:'test'
					},{
						id:'1', name:'test2'
					}]
				})
			}
		},
		{ header:'firstName', dataIndex:'firstName', flex:1 },
		{ header:'lastName', dataIndex:'lastName', flex:1 },
		{ header:'company', dataIndex:'company'},
		{ 
			header:'birthday', 
			dataIndex:'birthday', 
			filter:{
				xtype:'datefield',
				format:'Y-m-d'
			}
		}
	]

});
I've also modified the FilterRow code so the onChange event work with a delay on combobox.

Code:
Ext.define('Progik.ux.grid.FilterRow', {
	extend:'Ext.util.Observable',
	
	init: function(grid) {
		this.grid = grid;
		this.applyTemplate();
		
		// when Ext grid state restored (untested)
		grid.on("staterestore", this.resetFilterRow, this);
		
		// when column width programmatically changed
		grid.headerCt.on("columnresize", this.resizeFilterField, this);
		
		grid.headerCt.on("columnmove", this.resetFilterRow, this);
		grid.headerCt.on("columnshow", this.resetFilterRow, this);
		grid.headerCt.on("columnhide", this.resetFilterRow, this);	
		
		grid.horizontalScroller.on('bodyscroll', this.scrollFilterField, this);
	},
	
	
	applyTemplate: function() {
		
		var searchItems = [];
		this.eachColumn( function(col) {
			var filterDivId = this.getFilterDivId(col.id);
			
			if (!col.filterField) {
				if(col.nofilter) {
					col.filter = { };
				} else if(!col.filter){
					col.filter = { };
					col.filter.xtype = 'textfield';
				}
				//console.log(col);
				col.filter = Ext.apply({								
					id:filterDivId,
					hidden:col.hidden,
					xtype:'component',
					cls: "small-editor filter-row-icon",
					width:col.width-2,
					enableKeyEvents:true,
					style:{
						margin:'1px 1px 1px 1px'
					}
				}, col.filter);
				
				col.filterField = Ext.ComponentManager.create(col.filter);
				
			} else {
				if(col.hidden != col.filterField.hidden) {
					col.filterField.setVisible(!col.hidden);
				}
			}
			
			if(col.filterField.xtype == 'combo' || col.filterField.xtype == 'datefield') {
				col.filterField.on("change", this.onChange, this);
			} else {
				col.filterField.on("keypress", this.onKeyPress, this);
			}
			
			
			searchItems.push(col.filterField);
		});
		
		if(searchItems.length > 0) {
			this.grid.addDocked(this.dockedFilter = Ext.create('Ext.container.Container', {
				id:this.grid.id+'docked-filter',
				weight: 100,
				dock: 'top',
				border: false,
				baseCls: Ext.baseCSSPrefix + 'grid-header-ct',
				items:searchItems,
				layout:{
	                type: 'hbox'
	            }
			}));
		}
	},
	
	// Removes filter fields from grid header and recreates
	// template. The latter is needed in case columns have been
	// reordered.
	resetFilterRow: function() {
		this.grid.removeDocked(this.grid.id+'docked-filter', true);
		delete this.dockedFilter;
		this.applyTemplate();
	},
	
	onChange: function() {
		
		if(!this.onChangeTask) {
			this.onChangeTask = new Ext.util.DelayedTask(function(){
	    		this.storeSearch();	
			}, this);
		}
		
		this.onChangeTask.delay(1000);
				
	},
	
	onKeyPress: function(field, e) {
		if(e.getKey() == e.ENTER) {
			this.storeSearch();			
		}
	},
	
	getSearchValues: function() {
		var values = {};
		this.eachColumn( function(col) {
			if(col.filterField.xtype != 'component') {
				values[col.dataIndex] = col.filterField.getValue();
			}
		});
		return values;
	},
	
	storeSearch: function() {
		if(!this.grid.store.proxy.extraParams) {
			this.grid.store.proxy.extraParams = {};
		}		
		this.grid.store.proxy.extraParams.search = this.getSearchValues();
		this.grid.store.load();
	},
		
	// Resizes filter field according to the width of column
	resizeFilterField: function(headerCt, column, newColumnWidth) {
		var editor = column.filterField;
		editor.setWidth(newColumnWidth - 2);
	},
	
	scrollFilterField:function(e, target) {
		var width = this.grid.headerCt.el.dom.firstChild.style.width;
		this.dockedFilter.el.dom.firstChild.style.width = width;
		this.dockedFilter.el.dom.scrollLeft = target.scrollLeft;
	},
	
	// Returns HTML ID of element containing filter div
	getFilterDivId: function(columnId) {
		return this.grid.id + '-filter-' + columnId;
	},
	
	// Iterates over each column that has filter
	eachFilterColumn: function(func) {
		this.eachColumn( function(col, i) {
			if (col.filterField) {
				func.call(this, col, i);
			}
		});
	},
	
	// Iterates over each column in column config array
	eachColumn: function(func) {
		Ext.each(this.grid.columns, func, this);
	}
});