1. #1
    Sencha User
    Join Date
    Feb 2011
    Location
    Berne, Switzerland
    Posts
    6
    Vote Rating
    1
    mluethi is on a distinguished road

      1  

    Default FilterRow for Ext JS 4 Grids?

    FilterRow for Ext JS 4 Grids?


    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

  2. #2
    Sencha User renku's Avatar
    Join Date
    Feb 2009
    Location
    Estonia
    Posts
    437
    Vote Rating
    17
    renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold

      0  

    Default


    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

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Location
    Berne, Switzerland
    Posts
    6
    Vote Rating
    1
    mluethi is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    1
    Vote Rating
    0
    alecslupu is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha User renku's Avatar
    Join Date
    Feb 2009
    Location
    Estonia
    Posts
    437
    Vote Rating
    17
    renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Posts
    18
    Vote Rating
    0
    M101 is on a distinguished road

      0  

    Default I really need filter row for my project

    I really need filter row for my project


    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.
    Last edited by M101; 3 May 2011 at 11:10 AM. Reason: typo

  7. #7
    Sencha User renku's Avatar
    Join Date
    Feb 2009
    Location
    Estonia
    Posts
    437
    Vote Rating
    17
    renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold renku is a splendid one to behold

      0  

    Default


    Quote Originally Posted by M101 View Post
    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.

  8. #8
    Sencha User
    Join Date
    Mar 2011
    Posts
    18
    Vote Rating
    0
    M101 is on a distinguished road

      0  

    Default


    Rene, Thanks for your quick reply , Regards

  9. #9
    Sencha Premium Member zonereseau's Avatar
    Join Date
    Jan 2008
    Location
    Sherbrooke, QC
    Posts
    36
    Vote Rating
    5
    zonereseau is on a distinguished road

      0  

    Default One implementation

    One implementation


    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.


    Code:
    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);
    	}
    });

  10. #10
    Sencha User
    Join Date
    Mar 2011
    Posts
    18
    Vote Rating
    0
    M101 is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. Grid FilterRow
    By Surinder singh in forum Ext 3.x: User Extensions and Plugins
    Replies: 5
    Last Post: 17 Aug 2011, 7:12 PM
  2. GridPanel with FilterRow and Locking
    By taxidriver in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 7 Sep 2010, 4:16 AM
  3. ListView and filterRow
    By btogkas in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 7 Sep 2010, 3:23 AM
  4. Add FilterRow to ListViews
    By taxidriver in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 2 Sep 2010, 4:27 AM
  5. FilterRow in ListViews
    By taxidriver in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 1 Sep 2010, 5:52 AM

Thread Participants: 19

Tags for this Thread