FilterRow for Ext JS 4 Grids?

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

i attached original image and press table image also check it.

orginal.jpg

tabkeyerror.jpg

in first image i search arunaa in firstname get and show all data in grid.
in second image i use tab key to move after workphone, filter row one move, not move for header and grid data you see my second image.

give some suggestion how i solve this error?

**szolarp** · 28 Nov 2011 4:54 AM

Hi,

We've modified the resizeFilterField function:

Code:

resizeFilterField: function (headerCt, column, newColumnWidth) {    
    var cm = this.grid.columns;


    this.eachFilterColumn(function(col, i) {
        Ext.getCmp(col.xfilter.id).setWidth(cm[i].getWidth() - 2);
    });
},

To solve the issue, change the "columnresize" event to "afterlayout" at the line 40.

Code:

grid.on("afterlayout", this.resizeFilterField, this);

**ps_arunkumar** · 28 Nov 2011 9:28 PM

my grid

Code:

var grid_reservation = Ext.create('Ext.grid.Panel', {            width: '100%',
        height: '100%',
        title: 'ExtJS.com - Browse Forums',
        store: store_reservation,
        disableSelection: true,
        loadMask: true,
	columnLines: true,
	resizable:true,
        viewConfig: {
            id: 'gv',
            trackOver: false,
            stripeRows: false,
            plugins: [{
                ptype: 'preview',
                bodyField: 'excerpt',
                expanded: true,
                pluginId: 'preview'
            }]
        },
            columns: [
                {
			//locked   : true,
                    id: 'pktransaction',
            text: "Edit",
            dataIndex: 'Edit_transaction',
            sortable: true,
	   width: 100,
	   nofilter:true


        },{
            text: "First Name",
            dataIndex: 'firstname',
            width: 100,
            sortable: true
        },{
            text: "Last Name",
            dataIndex: 'lastname',
            width: 100,
            sortable: true
        },{
            text: "Date Arriving",
            dataIndex: 'checkin',
            width: 100,
            sortable: true,
	    xfilter:{
					       xtype:'datefield',
					       format:'m/d/Y'
				       }
        },{
            text: "Stay Through",
            dataIndex: 'stay_through',
            width: 100,
            sortable: false
        },{
            text: "Date Leaving",
            dataIndex: 'checkout',
            width: 100,
            sortable: true,
	    xfilter:{
					       xtype:'datefield',
					       format:'m/d/Y'
				       }
        },{
             text: "Room",
            dataIndex: 'roomname',
            width: 100,
            sortable: true
        },{
            text: "Room #",
            dataIndex: 'room_number',
            width: 100,
            sortable: true
        },{
            text: "Home Phone",
            dataIndex: 'homephone',
            width: 100,
            sortable: true
        },{
            text: "Work Phone",
            dataIndex: 'workphone',
            width: 100,
            sortable: true
        },{
            text: "Adults",
            dataIndex: 'no_of_adults',
            width: 100,
            sortable: true
        },{
            text: "Children",
            dataIndex: 'no_of_children',
            width: 100,
            sortable: true
        },{
            text: "Ref Number",
            dataIndex: 'refid',
            width: 100,
            sortable: true
        },{
            text: "Deposit",
            dataIndex: 'deposit',
            width: 100,
            sortable: true
        },{
            text: "Amount Owing",
            dataIndex: 'amount_remain',
            width: 100,
            sortable: true
        },{
            text: "Status",
            dataIndex: 'status',
            width: 100,
            sortable: true
        },{
            text: "Package Type",
            dataIndex: 'package_type',
            width: 100,
            sortable: true
        },{
            text: "Comments",
            dataIndex: 'update_comments',
            width: 300,
            sortable: true
        },
   {
	    
            text: "&nbsp;",
            dataIndex: 'closeinvoice_printcard',
            sortable: false,	   
	    width: 300
	    }
            ],
	    dockedItems: [
					{
						xtype: 'toolbar',
						dock: 'top',
						items: [
							{
								text: 'Print Report',
								iconCls: 'icon-print',
								handler : function(){
									Ext.ux.grid.Printer.printAutomatically = false;
									Ext.ux.grid.Printer.print(grid_reservation);
								}
							},
							{	
								text:'Export to Excel',
								iconCls:'icon-excel',
								handler: function() {
									Ext.ux.grid.Exporter.exportAutomatically = false;
									Ext.ux.grid.Exporter.export(grid_reservation);
								}
							}
						]
					}
					],
	 	     // paging bar on the bottom
        bbar: Ext.create('Ext.PagingToolbar', {
	pageSize: 10,
            store: store_reservation,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
	    plugins: [ new Ext.create('Ext.ux.PagingToolbarResizer',{options : [ 10, 25, 50, 100 ]})]
          
        }),
        plugins: [ Ext.create('Ext.ux.grid.FilterRow') ],
	


            title: 'Reservation Reports',
            renderTo: 'grid-reservation',
            viewConfig: {
                stripeRows: true,
		emptyText: 'No records matching specified criteria'
            }
	    
	    
        });

in the above grid, nofilter is used in first column. now filter not work. dont use nofilter filter work fine.
see the below image.
nofiltererror.jpg

suppose i use group header in the grid means it show this error in firebug. see the below image.

groupheadererror.jpg

after i replace filterrow code this (szolarp said)

Code:

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);
		}
	},

to

Code:

resizeFilterField: function (headerCt, column, newColumnWidth) {    	    var cm = this.grid.columns;




	    this.eachFilterColumn(function(col, i) {
		Ext.getCmp(col.xfilter.id).setWidth(cm[i].getWidth() - 2);
	    });
	},

This

Code:

grid.headerCt.on("columnresize", this.resizeFilterField, this);

to

Code:

grid.headerCt.on("afterlayout", this.resizeFilterField, this);

now show this type filter, see the below image

group-header-error.jpg

what i need means, suppose you move scroll bar that time grid header and grid column both are move. same type i use tab key to pass next next column of the filter grid header and grid column both are move is it possible to move both. i attached my filterrow plugin.

Code:

Ext.namespace('Ext.ux.grid');

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("afterlayout", 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.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.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) {
			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;*/
		var values = {};
		    this.eachColumn( function(col) {
			// CHANGE: only send populated fields
			if (col.xfilterField.getValue() != '') { 
			    if(col.xfilterField && col.xfilterField.xtype != 'component') {
				values[col.dataIndex] = col.xfilterField.getValue();
			    }
			}
		    });




		    // CHANGE: converted to JSON to send 1 param
		    return Ext.JSON.encode(values); 
	},
	
	// CHANGE: need to clear all fields on reset
clearSearchValues: function() { 
    this.eachColumn( function(col) {
        if(col.xfilterField && col.xfilterField.xtype != 'component') {
            col.xfilterField.setValue('');
        }
    });
},
	
	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();*/
		
		if(!this.grid.store.proxy.extraParams) {
			this.grid.store.proxy.extraParams = {};
		    }        
		    // CHANGE: create member for parse
		    this.grid.store.proxy.extraParams.filters = '{"fields":'+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();*/
		 var dockedFilter = document.getElementById(this.grid.id + 'docked-filter');


        if (dockedFilter) {  
            this.eachColumn(function (col) {
                var filterDivId = this.getFilterDivId(col.id);
                if (col.hidden != col.xfilterField.hidden) {
                    col.xfilterField.setVisible(!col.hidden);
                }
            });


        }
	},
	
	/*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);
		}
	},*/
	
	resizeFilterField: function (headerCt, column, newColumnWidth) {    
	    var cm = this.grid.columns;




	    this.eachFilterColumn(function(col, i) {
		Ext.getCmp(col.xfilter.id).setWidth(cm[i].getWidth() - 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** · 30 Nov 2011 6:10 AM

how set default filter value before grid load?

**zonereseau** · 30 Nov 2011 7:33 AM

There is no official way to do that... you have two options

One is to set the value to the filter then load the store.

You need to modify the filterrow init function so that the grid will be able to access the filterRow plugin.

Code:

	init: function(grid) {
		this.grid = grid;
		this.applyTemplate();
		this.grid.filterRow = this;
	}

Here's an example of that method.

Code:

// Define the column
grid.columns = [{
  dataIndex:'test', 
  header:'test',
  xfilter:{
    xtype:'textfield',
    value:'test'
  }
}]

// after that you should load your store like this
grid.filterRow.storeSearch();

The other way is by loading the store with the specifics search values.

Code:

if(!grid.store.proxy.extraParams) {
  grid.store.proxy.extraParams = {};
}		

grid.store.proxy.extraParams.search = {
  test:'test'
};

grid.store.load();

**ps_arunkumar** · 1 Dec 2011 3:05 AM

Thanks,

i set default filter value to load store. Return empty data means it show emptyText content not show emptyText content.

it returns ({"totalCount":"0","results":null})

same data i enter filter input it show emptyText content. how solve this?

**zonereseau** · 8 Dec 2011 7:52 AM

Code:

Ext.define('Ext.ux.grid.FilterRow', {
	extend:'Ext.util.Observable',
	
	remoteFilter:true,
	
	init: function(grid) {
		this.grid = grid;
		this.grid.filterRow = this;
		this.grid.on('afterrender', this.applyTemplate, this, {single:true});		
	},
	
	
	applyTemplate: function() {
		
		// Setup events and apply the template 
		if(this.grid.lockedGrid) {
			
			this.applyFilterEvents(this.grid.lockedGrid);
			this.applyTemplateToColumns(this.grid.lockedGrid);

			this.applyFilterEvents(this.grid.normalGrid);			
			this.applyTemplateToColumns(this.grid.normalGrid);
			
		} else {
			
			this.applyFilterEvents(this.grid);		
			this.applyTemplateToColumns(this.grid);		
		}					
	},
	
	applyFilterEvents:function(grid) {
		
		// Add events
		if(!grid.gridFilterEvent) {
			
			// when column width programmatically changed
			grid.on("columnresize", this.resizeFilterField, this);
			
			// Reset filter on some events
			grid.on("staterestore", this.resetFilterRow, this);
			grid.on("resize", this.resetFilterRow, this);
			grid.on("move", this.resetFilterRow, this);
			grid.on("columnmove", this.resetFilterRow, this);
			grid.on("columnshow", this.resetFilterRow, this);
			grid.on("columnhide", this.resetFilterRow, this);	
			
			// when the scroller bar scroll, need to move the filter row columns
			if(grid.horizontalScroller) {
				grid.horizontalScroller.on('bodyscroll', this.scrollFilterField, grid);
			}
			
			// Setup a variable to tell that the events where already bind
			grid.gridFilterEvent = true;
		}
	},	
	
	applyTemplateToColumns:function(grid) {
				
		var searchItems = [];		
		this.eachColumn(grid.columns, function(col) {
			
			var filterDivId = this.getFilterDivId(col.id);
			
			var width = col.getWidth()-2;
			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({
					grid:grid,
					id:filterDivId,
					hidden:col.hidden,
					xtype:'component',
					baseCls: "xfilter-row",
					width:width,
					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);
			col.xfilterField.on("focus", this.onFieldFocus, this);
			col.xfilterField.on("blur", this.onFieldBlur, this);
			col.xfilterField.setWidth(width);
			
			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();			
		}
	},
	
	onFieldFocus:function(field) {
		var pos = field.getPosition(true);
		var grid = field.grid;
		
		if(grid.horizontalScroller && grid.horizontalScroller.scrollEl && grid.horizontalScroller.scrollEl.dom) {
			
			var scrollEl 	= grid.horizontalScroller.scrollEl;
			var clientWidth = scrollEl.dom.clientWidth;
			var scrollLeft 	= scrollEl.dom.scrollLeft;
			
			if(pos[0] <= scrollLeft || pos[0] >= clientWidth) {
				
				if(pos[0] < clientWidth) {
					pos[0] = 0;
				}
				
				grid.horizontalScroller.setScrollLeft(pos[0]);
			}
		}	
	},
	
	onFieldBlur:function(field) {
		
		// Fix for the last field blur
		var grid = field.grid;
		var columns = grid.headerCt.getVisibleGridColumns();

		if(columns[columns.length-1].xfilterField == field) {
			this.onFieldFocus(columns[0].xfilterField);
		}
	},
	
	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** · 9 Dec 2011 12:14 AM

hi zonereseau,

currently i use this filterrow.js

Code:

Ext.namespace('Ext.ux.grid');

Ext.define('Ext.ux.grid.FilterRow', {
	extend:'Ext.util.Observable',
	
	init: function(grid) {
		this.grid = grid;
		this.applyTemplate();
		this.grid.filterRow = this;
		
		// 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.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.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) {
			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;*/
		var values = {};
		    this.eachColumn( function(col) {
			// CHANGE: only send populated fields
			if (col.xfilterField.getValue() != '') { 
			    if(col.xfilterField && col.xfilterField.xtype != 'component') {
				values[col.dataIndex] = col.xfilterField.getValue();
			    }
			}
		    });




		    // CHANGE: converted to JSON to send 1 param
		    return Ext.JSON.encode(values); 
	},
	
	// CHANGE: need to clear all fields on reset
clearSearchValues: function() { 
    this.eachColumn( function(col) {
        if(col.xfilterField && col.xfilterField.xtype != 'component') {
            col.xfilterField.setValue('');
        }
    });
},
	
	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();*/
		
		if(!this.grid.store.proxy.extraParams) {
			this.grid.store.proxy.extraParams = {};
		    }        
		    // CHANGE: create member for parse
		    this.grid.store.proxy.extraParams.filters = '{"fields":'+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();*/
		 var dockedFilter = document.getElementById(this.grid.id + 'docked-filter');


        if (dockedFilter) {  
            this.eachColumn(function (col) {
                var filterDivId = this.getFilterDivId(col.id);
                if (col.hidden != col.xfilterField.hidden) {
                    col.xfilterField.setVisible(!col.hidden);
                }
            });


        }
	},
	
	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);
	}
});

is work fine page load fast.

your new filterrow.js is too slow not load page show unresponsive script error in firefox and google chrome. page not load. how resolve this loading error?
in the unresponsive script window i click stop script, grid show this type, see the image

Reser_1323418321026.jpg

**ganlhi** · 6 Jan 2012 4:29 AM

Hi zonereseau !

I have an update to propose. In the original Ext 3 plugin, you could use RegEx templates to define the behaviour of a filter, and I found it lacked in your version. Si I modified the getGridSearchValues method to add this feature.

It is used by adding a 'filter' property to the column definition, like this:

Code:

{
  header : 'Name',
  dataIndex : 'name',  flex : 1,
  filter : '/{0}/i' /* Anywhere in the value, case insensitive */
}

And here is the modified method:

Code:

        getGridSearchValues:function(grid) {		var values = {};
		this.eachColumn(grid.columns, function(col) {
			if(col.xfilterField && col.xfilterField.xtype != 'component') {
				var value = col.xfilterField.getValue(),
					test  = col.filter;
				
				if (typeof test === 'string' && test.match(/^\/.*\/[img]*$/)) {
					 // parse the regex string into pattern and flags
					var m = test.match(/^\/(.*)\/([img]*)$/),
						pattern = m[1],
						flags = m[2];
						
					// Create new regex substituting value inside pattern
					value = new RegExp(Ext.String.format(pattern, Ext.escapeRe(value)), flags);
				}
			
				values[col.dataIndex] = value;
			}
		});
		return values;
	}

I hope it will be useful to someone

**sebas2515** · 16 Jan 2012 11:51 AM

Somebody Can help me to implement this pluggin in a grid.

I tried to do but it doesn´t work and doesn't show me a firebug error. I did all of this post but nothing is good.

i need an example step by step how to do it.

I'm rally worried about that. I hope your help partner.

FilterRow for Ext JS 4 Grids?

Thread Tools

Search Thread

Display

tab key problem

tab key problem

nofilter error and tab key error.

nofilter error and tab key error.

set filter value default

set filter value default

set default filter value emptyText not show

set default filter value emptyText not show

TAB Problem fix (with other improvement)

TAB Problem fix (with other improvement)

Thanks for your reply

Thanks for your reply

Help with FilterRow

Help with FilterRow

Similar Threads

Grid FilterRow

GridPanel with FilterRow and Locking

ListView and filterRow

Add FilterRow to ListViews

FilterRow in ListViews

Tags for this Thread