FilterRow for Ext JS 4 Grids?

[mluethi]

Is there a possibility to filter content in a grid similar to the FilterRow extension?

I found those two extensions (for Ext JS 3):

• Ext.ux.grid.FilterRow by Rene Saarsoo
• Ext.ux.grid.FilterRow by Surinder Singh

Both didn't work for me in Ext JS 4 PR5.
Am I doing something wrong - or is there another solution?

TIA - Marcel

[renku]

It's quite expected that plugins written for Ext3 won't work in Ext4 - plugins usually rely a lot on the inner workings of components that they change, and in Ext4 really a lot has changed.

It currently looks to me, that "my" FilterRow has to be pretty-much rewritten from scratch for Ext4. I'm still only in the early process of understanding how the whole Grid internally works in Ext4. So I really can not tell when will I take up this task.

Rene Saarsoo

[mluethi]

Hello Rene

Thank you for your reply!
I thought that it may not be that easy...

Probably I will switch back to Ext JS 3.3 because I definitely need this feature.

Have a nice day.
Best regards,
Marcel

[alecslupu]

Hello!
I am also looking for this kind of filter.
Is any chance that we could help getting it done? (I am noob - 4 weeks of ext).

Alecs

[renku]

Heh. I think the only way to help currently is to rewrite it by yourself for Ext4. The source is open for you to fork: https://github.com/nene/filter-row

Although, if enough people ask for it, that will probably push me into implementing it sooner. Most of all I need to find some time for doing it, but I have many other things in my schedule.

[M101]

Hi,
I really need filter row for my project. and the dead line is near. how could I use filter row written in ext js 3 in my applications that written in ext js 4.

Thanks.

[renku]

how could I use filter row written in ext js 3 in my applications that written in ext js 4.

Short answer: You can't. Grids in ExtJS 4 are so differently implemented that plugins meant for previous version simply won't work.

I've been digging a bit inside ExtJS 4 to see how I could implement FilterRow in it, but so far I've only found several ways how I can't do it... but we'll see.

[M101]

Rene, Thanks for your quick reply , Regards

[zonereseau]

Here is a little implementation that work with ExtJS4.

It use only remote store query for the search (filter).

This is based on https://github.com/nene/filter-row.

Ext.define('Ext.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() {
		var values = {};
		this.eachColumn( function(col) {
			if(col.filterField.xtype != 'component') {
				values[col.dataIndex] = col.filterField.getValue();
			}
		});
		
		this.grid.store.load({
			params:{
				search:values
			}
		});
	},
	
	onKeyPress: function(field, e) {
		if(e.getKey() == e.ENTER) {
			
			var values = {};
			this.eachColumn( function(col) {
				if(col.filterField.xtype != 'component') {
					values[col.dataIndex] = col.filterField.getValue();
				}
			});
			
			this.grid.store.load({
				params:{
					search:values
				}
			});
		}
	},

	
	// When grid has forceFit: true, then all columns will be resized
	// when grid resized or column added/removed.
	resizeAllFilterFields: function() {
		//var cm = this.grid.getColumnModel();
		this.eachFilterColumn( function(col, i) {
			if(col.el) { var width = col.getWidth(); }
			else { var width = col.width; }
			this.resizeFilterField(this.grid.headerCt, col, width);
		});
	},
	
	// 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);
	}
});

[M101]

zonereseau
I am very interested in implementing it. Would you please tell me how can I do it? (I am pretty new in ext js)
Can this whole file replace the FilterRow.js file?
Thanks.