FilterRow for Ext JS 4 Grids?

[seamas]

If add or remove a coulumn , filter text boxes are getting mssed up..



Thanks

[seamas]

when remove a column ,call resetFilterRow(), just the first colum have filter field, the others filter field displayed
like following screenshot
untitled.jpg

[reproman]

zonereseau,

Nice work on this. Do you have any updates to your plugin?

Thanks!

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

[reproman]

Has anyone had success with this plugin with any build of 4.1 ? I just tried and it does not seem to function properly with 4.1 RC 1.

Thanks!

[extjser12]

Can you please update your Plugin for Ext JS 4.1 RC1?

Thanks in advance!

Kind regards, extjser12

[vinothkumarkal123]

download.jpg

Ext.apply(Ext.form.VTypes, {
				daterange : function(val, field) {
				var date = field.parseDate(val);
				if(!date){
				return false;
				}
				if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
				var start = Ext.getCmp(field.startDateField);
				start.setMaxValue(date);
				start.validate();
				this.dateRangeMax = date;
				}
				else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
				var end = Ext.getCmp(field.endDateField);
				end.setMinValue(date);
				end.validate();
				this.dateRangeMin = date;
				}

the above ext.apply for form field vtypes. how can we do that for filter grid validations i have start date and end date in filter grid columns. the date range follows the condition like the above code but we need for that filter row plugin?

Thanks,
vinoth

[seamas]

Hi guys

Is there any good way to solve following case?

There will be out column has filter field.
columns:[{
text : 'Out',
columns : [ {
text : 'a',
layout : 'fit',
sortable : true,
dataIndex : 'a'
}, {
text : b,
layout : 'fit',
sortable : true,
dataIndex : 'b'
} } }]]}]]]]

[jccardenas]

Hi!
The example submitted by ps_arunkumar (Post #48) Is working for me on ExtJS 4.1 final
The only problem that I am getting with this version is the line 19:
"grid.horizontalScroller.on('bodyscroll', this.scrollFilterField, this);"

I get the grid.horizontalScroller is undefined error.

I know scrolling management has changed in 4.1, but does someone know how to exactly replace this line so that the horizontal scroller works fine in 4.1?
Without this listener, the filter columns stuck fixed in the header even when the entire grid scrolls horizontally.

Thanks

[jccardenas]

OK here you have it, finally working with scrolling and column move fixes. Hope helps any of you!

//jccardenas@humaniza
//Working on Ext-JS 4.1

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);    
        
        var view = grid.getView();
        view.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,
                    width:col.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);
            
            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);
        this.onChangeTask.delay(0);
    },
    
    onChange: function(field, newValue, oldValue) {
        
        if(!this.onChangeTask) {
            this.onChangeTask = new Ext.util.DelayedTask(function(){
                this.storeSearch();    
            }, this);
        }
        
        //this.onChangeTask.delay(1000);
        this.onChangeTask.delay(0);
                
    },
    
    onKeyDown: function(field, e) {
        if(e.getKey() == e.ENTER) {
            this.storeSearch();            
        }
    },
    
    getSearchValues: function() {
        
        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 = {};
            }        
            // 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 () {
        var dockedFilter = document.getElementById(this.grid.id+'docked-filter');
        if (dockedFilter) {
            dockedFilter.parentNode.removeChild(dockedFilter);
        }
        delete this.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);
            editor.setWidth(newColumnWidth);
        }
    },
    
    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);
    }
});

[Bonsai media]

OK here you have it, finally working with scrolling and column move fixes. Hope helps any of you!

...

Just tried to use this code but when I type something in one of the filter textboxes and press enter, I see my Grid reloading (the underlying Store being refreshed) but nothing happening...