1. #41
    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


    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?

  2. #42
    Sencha User
    Join Date
    Aug 2008
    Posts
    3
    Vote Rating
    0
    szolarp is on a distinguished road

      0  

    Default


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

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

      0  

    Default nofilter error and tab key error.

    nofilter error and tab key error.


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





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

      0  

    Default set filter value default

    set filter value default


    how set default filter value before grid load?

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


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

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

      0  

    Default set default filter value emptyText not show

    set default filter value emptyText not show


    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?

  7. #47
    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 TAB Problem fix (with other improvement)

    TAB Problem fix (with other improvement)


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

  8. #48
    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


    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

  9. #49
    Sencha Premium Member
    Join Date
    Jun 2011
    Posts
    18
    Vote Rating
    0
    ganlhi is on a distinguished road

      0  

    Default


    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

  10. #50
    Sencha User
    Join Date
    Dec 2011
    Posts
    25
    Vote Rating
    0
    sebas2515 is on a distinguished road

      0  

    Default Help with FilterRow

    Help with FilterRow


    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.

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