1. #21
    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 the CSS I used...
    Code:
    .xfilter-row {
    	position:absolute !important;	
    }
    
    .xfilter-row input {
    	font-size: 11px !important;
        background: #FFFFFF url(../images/filter-row-icon.png) no-repeat bottom left !important;
        padding: 0 5px 0 16px !important;
    }
    Attached Images

  2. #22
    Sencha User
    Join Date
    Sep 2009
    Location
    Karlsruhe, Germany
    Posts
    8
    Vote Rating
    0
    HyperteX is on a distinguished road

      0  

    Default


    Hi,

    is it just me or doesn't it work without a PagingToolbar?

    With: http://images.devs-on.net/Image/F8Cr...c4-Bereich.png
    Without: http://images.devs-on.net/Image/ZXpM...xt-Bereich.png

    Thanks for your help

  3. #23
    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


    Have you try with the default EXTJS Theme ? On my part it work with and without the paging toolbar

  4. #24
    Sencha User
    Join Date
    Sep 2009
    Location
    Karlsruhe, Germany
    Posts
    8
    Vote Rating
    0
    HyperteX is on a distinguished road

      0  

    Default


    Hi,

    I don't have a clue why - but, it works now overnight
    Thanks so much for your Help! I'll buy you a beer someday
    Even other xtypes like datefield or combo work just great!

    Regards

  5. #25
    Sencha User
    Join Date
    Mar 2011
    Posts
    18
    Vote Rating
    0
    M101 is on a distinguished road

      0  

    Default


    Hi,
    I applied the code to a simple grid which works great!
    When I applied the plugin on a more complex grid, which is also generated dynamically (therefore the ids - grid and columns, are ext generated, not defined specifically), well, the resetFilterRow totally does not work. any idea what might be reason?

    Thanks.

    M101

  6. #26
    Sencha User
    Join Date
    Mar 2011
    Posts
    18
    Vote Rating
    0
    M101 is on a distinguished road

      0  

    Default new resetFilterRow

    new resetFilterRow


    I changed the resetFilterRow function. At least it seems working now.

    Code:
        
    resetFilterRow: function () {  
            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);
                    }
                });
    
            }
    }

  7. #27
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,000
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I have made a few changes:

    only send the changed columns instead of all
    Code:
    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); 
    },
    added function to allow clearing of all fields
    Code:
    // CHANGE: need to clear all fields on reset
    clearSearchValues: function() { 
        this.eachColumn( function(col) {
            if(col.xfilterField && col.xfilterField.xtype != 'component') {
                col.xfilterField.setValue('');
            }
        });
    },
    send JSON as single param
    Code:
    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();
    },
    PHP function to parse fields from JSON
    Code:
    function get_column_filters($post_array)
    {
        $filter_array = isset($post_array) ? json_decode($post_array,TRUE) : null;
        return isset($filter_array['fields']) ? $filter_array['fields'] : null;
    }
    
    
    $filterlist = $this->get_column_filters($_POST['filters']);
    It would also be helpful to see the following added:
    -Icon on right to delete the text and reload data; same idea as: http://www.eekboom.de/ClearButton.html
    (omit the other icon as it would be crowded)

    -Icon to far right of all columns to clear all fields and reload data

    Regards,
    Scott.

  8. #28
    Sencha User pmachner's Avatar
    Join Date
    Jun 2011
    Location
    Kraków, Poland
    Posts
    54
    Vote Rating
    1
    pmachner is on a distinguished road

      1  

    Default


    Thanks to everyone, this code is really useful :-) I'm thinking of opening a feature request to add a filter row to the official Ext JS release. It would be really great to have it officially supported because it's more usable than the default grid filtering functionality. What do you think?

    Best regards,
    Piotr

  9. #29
    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


    It would be great, but before doing that we should probably do the extjs side of the filter code so that anybody could use it even without the server side of it.

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

      0  

    Default filterrow not work

    filterrow not work


    in firebug show this error

    grid.headerCt is undefined

    grid.headerCt.on("columnresize", this.resizeFilterField, this);

    my 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();
    		
    		// 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);
    	}
    });
    my grid

    Code:
    <html>
    <head>
    	<link rel="stylesheet" type="text/css" href="ext-4.0.2a/resources/css/ext-all.css" />
    	<link rel="stylesheet" type="text/css" href="ext-4.0.2a/examples/shared/example.css" />   
    	<script type="text/javascript" src="ext-4.0.2a/bootstrap.js"></script>
    	<script type="text/javascript" src="ext-4.0.2a/examples/ux/grid/FilterRow.js"></script>
    
    
    	 
        <style>
               .x-grid-cell-topic b {
                display: block;
            }
            .x-grid-cell-topic .x-grid-cell-inner {
                white-space: normal;
            }
            .x-grid-cell-topic a {
                color: #385F95;
                text-decoration: none;
            }
            .x-grid-cell-topic a:hover {
                text-decoration:underline;
            }
    		.x-grid-cell-topic .x-grid-cell-innerf {
    			padding: 5px;
    		}
    		.x-grid-rowbody {
    	        padding: 0 5px 5px 5px; 
    		}
     .x-grid-row-over .x-grid-cell-inner {
                font-weight: bold;
            }
    				.xfilter-row {
    	position:absolute !important;	
    }
    
    
    .xfilter-row input {
    	font-size: 11px !important;
        background: #FFFFFF url(ext-4.0.2a/examples/ux/grid/images/filter-row-icon.png) no-repeat bottom left !important;
        padding: 0 5px 0 16px !important;
    }
    		
        </style>
        <script>
    
    
    Ext.Loader.setConfig({enabled: true});
    
    
    Ext.Loader.setPath('Ext.ux', '../ux/');
    
    
    Ext.require([
    	'Ext.grid.*',
    	'Ext.data.*',
    	'Ext.util.*',
    	'Ext.toolbar.Paging',
            'Ext.window.Window',
    	'Ext.tip.QuickTipManager'
    ]);
    
    
    
    
    Ext.onReady(function(){  
    
    
                 
           Ext.define('UserDet', {
               extend: 'Ext.data.Model',
               fields: [ 'user_id', 'firstname', 'lastname', 'address'],
    	   idProperty: 'user_id'
    
    
           });
    
    
           var store = new Ext.data.Store({
    	pageSize: 10,
            model: 'UserDet',
            remoteSort: true,
              proxy: {
                  type: 'ajax',
                  url: 'extjsgrid.php',
    	      actionMethods : 'POST',
                  reader: {
                      type: 'json',
                      root: 'results',
    		   totalProperty: 'totalCount'
                  },
    	      // sends single sort as multi parameter
                simpleSortMode: true
    
    
              },
           
    	listeners: {
                        'beforeload': function(store, options) {
                            store.proxy.extraParams.sort='user_id';
                            store.proxy.extraParams.dir='DESC';
    			store.proxy.extraParams.start='0';
    			store.proxy.extraParams.limit='10';
    			store.proxy.extraParams.page='1';
    			
    			
                        }
    		    }
           });       
    
    
    
    
        
      var pluginExpanded = true;
            var grid = Ext.create('Ext.grid.Panel', {
                width: '100%',
            height: '100%',
            title: 'ExtJS.com - Browse Forums',
            store: store,
            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: 'user_id',
                text: "User Id",
                dataIndex: 'user_id',
                sortable: false,
    	     width: 100
    
    
            },{
                text: "First Name",
                dataIndex: 'firstname',
                width: 100,
                sortable: true
            },{
                text: "Last Name",
                dataIndex: 'lastname',
                width: 100,
                sortable: true
            },{
                text: "Address",
                dataIndex: 'address',
                width: 100,
                sortable: true
            }
                ],
    	    
    	     // paging bar on the bottom
            bbar: Ext.create('Ext.PagingToolbar', {
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying topics {0} - {1} of {2}',
                emptyMsg: "No topics to display"
              
            }),
            plugins: [  Ext.create('Ext.ux.grid.FilterRow') ],
                title: 'User Details',
                renderTo: 'grid-user',
                viewConfig: {
                    stripeRows: true
                }
    	    
    	    
            });
    
    
            store.loadPage(1);
    
    
          var window = Ext.create('Ext.Window',{ 
     
    	
        frame: false,
        width: 960,
            height: 400,
    
    
        constrainHeader:true,
        minimizable:true,
        maximizable:true,
         x: 232,
            y: 180,
        
           
    
    
        layout: {
            type: 'fit',
            align: 'center'
        },
       
        resizable: false,
        items: [{
          
            items: [grid]
        }]
                    }); 
            window.show();  
    
    
            
        });
    
    
    
    
    
    
        </script>
    
    
    </head>
        <body>
    
    
    
    
      
    <div style="padding:0px 0px 20px 0px;overflow: auto;width:980px;height:500px;">    
       <div id="grid-user"></div>
    
    
    
    
        
    </div>
    
    
    
    
    </body>
        </html>
    anybody give suggestion?

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