FilterRow for Ext JS 4 Grids?

**zonereseau** · 31 Oct 2011 5:14 AM

I've just updated it to work with ExtJS 4.07.

Code:

Ext.define('Progik.common.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.on("columnresize", this.resizeFilterField, this);
		
		grid.on("columnmove", this.resetFilterRow, this);
		grid.on("columnshow", this.resetFilterRow, this);
		grid.on("columnhide", this.resetFilterRow, this);	
		
		grid.horizontalScroller.on('bodyscroll', this.scrollFilterField, this);
	},
	
	
	applyTemplate: function() {
		var searchItems = [];

		if(this.grid.rendered == false) {
			Ext.Function.defer(this.applyTemplate, 50, this);
			return;	
		}
				
		this.eachColumn(function(col) {
			
			var filterDivId = this.getFilterDivId(col.id);
			
			if (!col.xfilterField) {
								
				if(col.nofilter || col.isCheckerHd != undefined) {
					col.xfilter = { };
				} else if(!col.xfilter){
					col.xfilter = { };
					col.xfilter.xtype = 'textfield';
				}
				col.xfilter = Ext.apply({
					id:filterDivId,
					hidden:col.hidden,
					xtype:'component',
					baseCls: "xfilter-row",
					width:col.getWidth()-2,
					enableKeyEvents:true,
					style:{
						margin:'1px 1px 1px 1px'
					},
					hideLabel:true					
				}, col.xfilter);
				
				col.xfilterField = Ext.ComponentManager.create(col.xfilter);
				
			} else {
				if(col.hidden != col.xfilterField.hidden) {
					col.xfilterField.setVisible(!col.hidden);
				}
			}
			
			if(col.xfilterField.xtype == 'combo') {
				col.xfilterField.on("select", this.onSelect, this);
			} else if(col.xfilterField.xtype == 'datefield') {
				col.xfilterField.on("change", this.onChange, this);
			}
			
			col.xfilterField.on("keydown", this.onKeyDown, this);
			
			searchItems.push(col.xfilterField);
		});
		
		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'
	            }
			}));
		}
	},
	
	onSelect: function(field, value, option) {
		if(!this.onChangeTask) {
			this.onChangeTask = new Ext.util.DelayedTask(function(){
	    		this.storeSearch();	
			}, this);
		}
		
		this.onChangeTask.delay(1000);
	},
	
	onChange: function(field, newValue, oldValue) {
		
		if(!this.onChangeTask) {
			this.onChangeTask = new Ext.util.DelayedTask(function(){
	    		this.storeSearch();	
			}, this);
		}
		
		this.onChangeTask.delay(1000);
				
	},
	
	onKeyDown: function(field, e) {
		if(e.getKey() == e.ENTER) {
			this.storeSearch();			
		}
	},
	
	getSearchValues: function() {
		var values = {};
		this.eachColumn( function(col) {
			if(col.xfilterField && col.xfilterField.xtype != 'component') {
				values[col.dataIndex] = col.xfilterField.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.currentPage = 1;
		this.grid.store.load();
	},
			
	resetFilterRow: function () {
    	this.grid.removeDocked(this.grid.id+'docked-filter', true);
		delete this.dockedFilter;
		
		//This is because of the reconfigure
		var dockedFilter = document.getElementById(this.grid.id+'docked-filter');
		if (dockedFilter) {
			dockedFilter.parentNode.removeChild(dockedFilter);
		}
		
		this.applyTemplate();
	},
	
	resizeFilterField: function (headerCt, column, newColumnWidth) {
		var editor;
		if (!column.xfilterField) {
			//This is because of the reconfigure
			this.resetFilterRow();
			editor = this.grid.headerCt.items.findBy(function (item) { return item.dataIndex == column.dataIndex; }).xfilterField;
		} else {
			editor = column.xfilterField;
		}		
		if(editor) {
			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.xfilterField) {
				func.call(this, col, i);
			}
		});
	},
	
	// Iterates over each column in column config array
	eachColumn: function(func) {
		Ext.each(this.grid.columns, func, this);
	}
});

**ps_arunkumar** · 31 Oct 2011 10:29 PM

finally it work, remove this

Code:

locked: true,

i use this example, http://docs.sencha.com/ext-js/4-0/#!...king-grid.html. how i use your plugin to this example. more option i need, suppose i specify this field is not require to search field ( particular field search input field not show). in date field date icon enable and click that icon whatever date i choose insert into search input. any idea to this two option to integrate you plugin.

**zonereseau** · 1 Nov 2011 7:02 AM

Hi,

I've just created a correct so that lockable columns could be used. I also add an option to use local filter or remoteFilter.

Code:

Ext.define('Progik.common.grid.FilterRow', {
	extend:'Ext.util.Observable',
	
	remoteFilter:true,
	
	init: function(grid) {
		this.grid = grid;
		this.applyTemplate();
		this.grid.filterRow = this;
	},
	
	
	applyTemplate: function() {
		

		if(this.grid.rendered == false) {
			Ext.Function.defer(this.applyTemplate, 50, this);
			return;	
		}
		
		// Does it contain a locked grid
		if(this.grid.lockedGrid) {
			this.applyTemplateToColumns(this.grid.lockedGrid);
			this.applyTemplateToColumns(this.grid.normalGrid);
		}
		else {
			this.applyTemplateToColumns(this.grid);		
		}
			
	},
	
	applyTemplateToColumns:function(grid) {
		
		// Add events
		if(!grid.gridFilterEvent) {
			// when Ext grid state restored (untested)
			grid.on("staterestore", this.resetFilterRow, this);
			
			// when column width programmatically changed
			grid.on("columnresize", this.resizeFilterField, this);
			
			grid.on("columnmove", this.resetFilterRow, this);
			grid.on("columnshow", this.resetFilterRow, this);
			grid.on("columnhide", this.resetFilterRow, this);	
			
			if(grid.horizontalScroller) {
				grid.horizontalScroller.on('bodyscroll', this.scrollFilterField, grid);
			}
			
			grid.gridFilterEvent = true;
		}
				
		var searchItems = [];
		this.eachColumn(grid.columns, function(col) {
			
			var filterDivId = this.getFilterDivId(col.id);
			
			if (!col.xfilterField) {
								
				if(col.nofilter || col.isCheckerHd != undefined) {
					col.xfilter = { };
				} else if(!col.xfilter){
					col.xfilter = { };
					col.xfilter.xtype = 'textfield';
				}
				
				var width = col.getWidth();
				
				col.xfilter = Ext.apply({
					id:filterDivId,
					hidden:col.hidden,
					xtype:'component',
					baseCls: "xfilter-row",
					width:width-2,
					enableKeyEvents:true,
					style:{
						margin:'1px 1px 1px 1px'
					},
					hideLabel:true					
				}, col.xfilter);
				
				col.xfilterField = Ext.ComponentManager.create(col.xfilter);
				
			} else {
				if(col.hidden != col.xfilterField.hidden) {
					col.xfilterField.setVisible(!col.hidden);
				}
			}
			
			if(col.xfilterField.xtype == 'combo') {
				col.xfilterField.on("select", this.onSelect, this);
			} else if(col.xfilterField.xtype == 'datefield') {
				col.xfilterField.on("change", this.onChange, this);
			}
			
			col.xfilterField.on("keydown", this.onKeyDown, this);
			
			searchItems.push(col.xfilterField);
		});
		
		if(searchItems.length > 0) {
			grid.addDocked(grid.dockedFilter = Ext.create('Ext.container.Container', {
				id:grid.id+'docked-filter',
				weight: 100,
				dock: 'top',
				border: false,
				baseCls: Ext.baseCSSPrefix + 'grid-header-ct',
				items:searchItems,
				layout:{
	                type: 'hbox'
	            }
			}));
		}			
		
	},
	
	onSelect: function(field, value, option) {
		if(!this.onChangeTask) {
			this.onChangeTask = new Ext.util.DelayedTask(function(){
	    		this.storeSearch();	
			}, this);
		}
		
		this.onChangeTask.delay(1000);
	},
	
	onChange: function(field, newValue, oldValue) {
		
		if(!this.onChangeTask) {
			this.onChangeTask = new Ext.util.DelayedTask(function(){
	    		this.storeSearch();	
			}, this);
		}
		
		this.onChangeTask.delay(1000);
				
	},
	
	onKeyDown: function(field, e) {
		if(e.getKey() == e.ENTER) {
			this.storeSearch();			
		}
	},
	
	getSearchValues: function() {
		var values = {};
		
		// Does it contain a locked grid
		if(this.grid.lockedGrid) {
			values = Ext.apply(this.getGridSearchValues(this.grid.lockedGrid), this.getGridSearchValues(this.grid.normalGrid));			
		} else {
			values = this.getGridSearchValues(this.grid);
		}
		return values;
	},
	
	getGridSearchValues:function(grid) {
		var values = {};
		this.eachColumn(grid.columns, function(col) {
			if(col.xfilterField && col.xfilterField.xtype != 'component') {
				values[col.dataIndex] = col.xfilterField.getValue();
			}
		});
		return values;
	},
	
	storeSearch: function() {
		
		if(this.remoteFilter) {
			if(!this.grid.store.proxy.extraParams) {
				this.grid.store.proxy.extraParams = {};
			}		
			this.grid.store.proxy.extraParams.search = this.getSearchValues();
			this.grid.store.currentPage = 1;
			this.grid.store.load();
		} else {
			var values = this.getSearchValues();
			this.grid.store.clearFilter();
			for(key in values) {
				if(values[key] != undefined && values[key] != "") {
					this.grid.store.filter(key, values[key]);
				}
			}			
		}
	},
	
	clearSearchValues:function() {
		// Does it contain a locked grid
		if(this.grid.lockedGrid) {
			this.clearGridSearchValues(this.grid.lockedGrid);
			this.clearGridSearchValues(this.grid.normalGrid);			
		} else {
			this.clearGridSearchValues(this.grid);
		}
	},
	
	clearGridSearchValues:function(grid) {
		this.eachColumn(grid.columns, function(col) {
			if(col.xfilterField && col.xfilterField.xtype != 'component') {
				col.xfilterField.setValue('');
			}
		});
	},
	
	clearSearch:function() {		
		this.clearSearchValues();
		this.storeSearch();		
	},
			
	resetFilterRow: function () {
		if(this.grid.lockedGrid) {
			this.removeDockedFilter(this.grid.lockedGrid);
			this.removeDockedFilter(this.grid.normalGrid);
		} else {
			this.removeDockedFilter(this.grid);
		}
		this.applyTemplate();
	},
	
	removeDockedFilter:function(grid) {
		grid.removeDocked(grid.id+'docked-filter', true);
		delete grid.dockedFilter;
	
		//This is because of the reconfigure
		var dockedFilter = document.getElementById(grid.id+'docked-filter');
		if (dockedFilter) {
			dockedFilter.parentNode.removeChild(dockedFilter);
		}
	},
	
	resizeFilterField: function (headerCt, column, newColumnWidth) {
		var editor;
		if (!column.xfilterField) {
			//This is because of the reconfigure
			this.resetFilterRow();
			editor = this.grid.headerCt.items.findBy(function (item) { return item.dataIndex == column.dataIndex; }).xfilterField;
		} else {
			editor = column.xfilterField;
		}		
		if(editor) {
			editor.setWidth(newColumnWidth - 2);
		}
	},
	
	scrollFilterField:function(e, target) {
		var width = this.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) {
		Ext.each(this.grid.columns, function(col, i) {
			if (col.xfilterField) {
				func.call(this, col, i);
			}			
		}, this);
	},
	
	// Iterates over each column in column config array
	eachColumn: function(columns, func) {
		Ext.each(columns, func, this);
	}
});

**ps_arunkumar** · 2 Nov 2011 8:03 PM

Thanks for your reply. now its work.

in grid one date column present in that now i enter date in search field manually. is it possible to integrate calendar in search field. it is easy to select date. see bellow image in attachment.screenshot1.png

**zonereseau** · 3 Nov 2011 4:25 AM

Yes It's possible to integrate a calendar or any type of field provide by extjs.

When you define your columns just pass the field config like this :

Code:

this.columns = [
{ 
	header:__('combo'), 
	dataIndex:'combo',		
	xfilter:{
		xtype:'combo',
		queryMode:'local',
		store:Ext.create('TheStore', {
			autoLoad:true
		}),
		displayField:'username',
		valueField:'id'
	}
},
{
	header:__('Date'), 
	dataIndex:'date',		
	xfilter:{
		xtype:'datefield',
		format:'Y-m-d'
	}
}

**ps_arunkumar** · 25 Nov 2011 6:00 AM

i search data in the grid after i clear that data, now search goes to null in filter. for example
first time it goes to this

Code:

{"fields":{"checkin":"2011-11-18T00:00:00"}}

after i clear the filter data now it goes to

Code:

{"fields":{"checkin":null}}

how solve this?

and

now filter option is set all columns of the grid. i need few columns only not all columns is it possible?

**ps_arunkumar** · 25 Nov 2011 6:13 AM

one more problem is i use tab key for next next column in filter, filter row only move not header and grid data. how to move header and grid data?

**zonereseau** · 25 Nov 2011 7:52 AM

To remove the filter from one column just set the property nofilter:true in your column definition.

The search result will return null or ""... I suggest to treat it on the server side.

I'm not sure how to produce your problem with the tab key... when I click into the first input box, then I press the tab key, I move form one column filter to another.

**ps_arunkumar** · 27 Nov 2011 9:19 PM

i use filterrow plugin for this example http://docs.sencha.com/ext-js/4-0/#!...ader-grid.html

it show this error in firebug

this.grid.headerCt.items.findBy(function (item) {return item.dataIndex == column.dataIndex;}) is null

editor = this.grid.headerCt.items.f...== column.dataIndex; }).xfilterField;

**ps_arunkumar** · 27 Nov 2011 11:29 PM

i set one column nofilter:true

after i search other column any data it show below error in firebug.

col.xfilterField.getValue is not a function

if (col.xfilterField.getValue() != '') { FilterRow.js (line 123)

FilterRow for Ext JS 4 Grids?

Thread Tools

Search Thread

Display

ExtJS 4.07

ExtJS 4.07

filterrow for extjs 4 grid

filterrow for extjs 4 grid

Correction for lockeable grid

Correction for lockeable grid

Thanks

Thanks

ater filter clear

ater filter clear

tab key problem

tab key problem

Here some answer to your questions ps_arunkumar

Here some answer to your questions ps_arunkumar

thanks for your reply

thanks for your reply

nofilter error

nofilter error

Similar Threads

Grid FilterRow

GridPanel with FilterRow and Locking

ListView and filterRow

Add FilterRow to ListViews

FilterRow in ListViews

Tags for this Thread