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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar