1. #51
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    36
    Vote Rating
    0
    seamas is on a distinguished road

      0  

    Thumbs up Please look into my issue

    Please look into my issue


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



    Thanks

  2. #52
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    36
    Vote Rating
    0
    seamas is on a distinguished road

      0  

    Default Please help me

    Please help me


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

  3. #53
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    38
    Vote Rating
    0
    reproman is on a distinguished road

      0  

    Default


    zonereseau,

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

    Thanks!


    Quote Originally Posted by zonereseau View Post
    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);
        }
    });

  4. #54
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    38
    Vote Rating
    0
    reproman is on a distinguished road

      0  

    Default


    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!

  5. #55
    Sencha User
    Join Date
    Feb 2012
    Posts
    59
    Vote Rating
    0
    extjser12 is on a distinguished road

      0  

    Default


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

    Thanks in advance!

    Kind regards, extjser12

  6. #56
    Sencha User
    Join Date
    Apr 2012
    Posts
    1
    Vote Rating
    0
    vinothkumarkal123 is on a distinguished road

      0  

    Default filter row plugin date range validation how to?

    filter row plugin date range validation how to?


    download.jpg

    Code:
    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

  7. #57
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    36
    Vote Rating
    0
    seamas is on a distinguished road

      0  

    Default About Column include Columns case

    About Column include Columns case


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

  8. #58
    Sencha User
    Join Date
    May 2010
    Posts
    6
    Vote Rating
    0
    jccardenas is on a distinguished road

      0  

    Default


    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

  9. #59
    Sencha User
    Join Date
    May 2010
    Posts
    6
    Vote Rating
    0
    jccardenas is on a distinguished road

      0  

    Default FilterRow.js Working on 4.1

    FilterRow.js Working on 4.1


    OK here you have it, finally working with scrolling and column move fixes. Hope helps any of you!
    Code:
    //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);
        }
    });

  10. #60
    Sencha User
    Join Date
    Jan 2012
    Posts
    7
    Vote Rating
    0
    Bonsai media is on a distinguished road

      0  

    Default


    Quote Originally Posted by jccardenas View Post
    OK here you have it, finally working with scrolling and column move fixes. Hope helps any of you!
    Code:
    ...
    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...

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