1. #31
    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 ExtJS 4.07

    ExtJS 4.07


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

  2. #32
    Sencha User
    Join Date
    Oct 2011
    Posts
    33
    Vote Rating
    0
    ps_arunkumar is on a distinguished road

      0  

    Default filterrow for extjs 4 grid

    filterrow for extjs 4 grid


    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.

  3. #33
    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 Correction for lockeable grid

    Correction for lockeable grid


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

  4. #34
    Sencha User
    Join Date
    Oct 2011
    Posts
    33
    Vote Rating
    0
    ps_arunkumar is on a distinguished road

      0  

    Default Thanks

    Thanks


    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

  5. #35
    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


    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'
    	}
    }

  6. #36
    Sencha User
    Join Date
    Oct 2011
    Posts
    33
    Vote Rating
    0
    ps_arunkumar is on a distinguished road

      0  

    Default ater filter clear

    ater filter clear


    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?

  7. #37
    Sencha User
    Join Date
    Oct 2011
    Posts
    33
    Vote Rating
    0
    ps_arunkumar is on a distinguished road

      0  

    Default tab key problem

    tab key problem


    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?

  8. #38
    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 Here some answer to your questions ps_arunkumar

    Here some answer to your questions ps_arunkumar


    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.

  9. #39
    Sencha User
    Join Date
    Oct 2011
    Posts
    33
    Vote Rating
    0
    ps_arunkumar is on a distinguished road

      0  

    Default thanks for your reply

    thanks for your reply


    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;

  10. #40
    Sencha User
    Join Date
    Oct 2011
    Posts
    33
    Vote Rating
    0
    ps_arunkumar is on a distinguished road

      0  

    Default nofilter error

    nofilter error


    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)

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