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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi