1. #1
    Ext User
    Join Date
    May 2007
    Posts
    2
    Vote Rating
    0
    r.selvaganapathi is on a distinguished road

      0  

    Default Pagination in grid with out remote computing

    Pagination in grid with out remote computing


    hi all,
    I want to make the grid with pagination .But the pagination should be handled in client side.
    For example I have 40 records.20 records only are showed at a time.When i press the pagination
    button,it should go to the next page with out server side computing..First time it self I want to load all
    the datas.But I want to restrict the datas according to pagination..Is it possible?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What's the point? Why not just scroll?

  3. #3
    Sencha User trbs's Avatar
    Join Date
    Mar 2007
    Posts
    310
    Vote Rating
    0
    trbs is on a distinguished road

      0  

    Default


    this has been covered in several other threads on the forum, search for PagingMemoryGrid

  4. #4
    Ext User
    Join Date
    Jun 2007
    Posts
    8
    Vote Rating
    0
    gricceri is on a distinguished road

      0  

    Default


    Quote Originally Posted by r.selvaganapathi View Post
    hi all,
    I want to make the grid with pagination .But the pagination should be handled in client side.
    For example I have 40 records.20 records only are showed at a time.When i press the pagination
    button,it should go to the next page with out server side computing..First time it self I want to load all
    the datas.But I want to restrict the datas according to pagination..Is it possible?
    Hi, I'm not sure if this is the best way to address this issue, anyway I post it.

    I wrote a PagedStore class that extend the Store class and override the original loadRecords method. I slightly modified it to trim the records array.
    Anyway this method doesn't work with sort.
    Another way could be ( even if I'm not sure about performance), load all the this.data collection, apply sort, get the records array with this.data.getRange, clear the data and reload it ( very dirty ).


    HTML Code:
    Ext.data.PagedStore = function(config){
    		
    		Ext.data.PagedStore.superclass.constructor.call(this, config);   
    };
    
    
    
    Ext.extend(Ext.data.PagedStore, Ext.data.Store, {
    	
    	loadRecords : function(o, options, success){
           
    	if(!o || success === false){
                if(success !== false){
                    this.fireEvent("load", this, [], options);
                }
                if(options.callback){
                    options.callback.call(options.scope || this, [], options, false);
                }
                return;
            }
    				
    	options.params = options.params || {};				
    				
    	var r = o.records;
    	if(typeof options.params.start != "undefined" && typeof options.params.limit != "undefined" ) {
    	   r = r.slice (options.params.start, options.params.start+options.params.limit)
    	}
    				
            var t = o.totalRecords || r.length;
            for(var i = 0, len = r.length; i < len; i++){
                r[i].join(this);
            }
    				
            if(!options || options.add !== true){
                this.data.clear();
                this.data.addAll(r);
                this.totalLength = t;
                this.applySort();
                this.fireEvent("datachanged", this);
            }else{
                this.totalLength = Math.max(t, this.data.length+r.length);
                this.data.addAll(r);
            }
            this.fireEvent("load", this, r, options);
            if(options.callback){
                options.callback.call(options.scope || this, r, options, true);
            }
        }
    	
    });
    

  5. #5
    Ext User
    Join Date
    Jun 2007
    Posts
    8
    Vote Rating
    0
    gricceri is on a distinguished road

      0  

    Default


    This works with sorting too:

    HTML Code:
    Ext.data.PagedStore = function(config){		
    		Ext.data.PagedStore.superclass.constructor.call(this, config);   
    		this.allData = this.data.clone();
    };
    
    Ext.extend(Ext.data.PagedStore, Ext.data.Store, {
    	
    	loadRecords : function(o, options, success){
           
    				if(!o || success === false){
                if(success !== false){
                    this.fireEvent("load", this, [], options);
                }
                if(options.callback){
                    options.callback.call(options.scope || this, [], options, false);
                }
                return;
            }
    				
    				options.params = options.params || {};				
    				
    				var r = o.records;							
            var t = o.totalRecords || r.length;  
                    
    				this.backParams	=	options.params;	      
            
            for(var i = 0, len = r.length; i < len; i++){
                r[i].join(this);
            }
            
            this.allData.clear();
    				this.allData.addAll(r);
    				
            if(!options || options.add !== true){
                this.applySort();     
                this.totalLength = t;
                this.fireEvent("datachanged", this);
            }else{
                this.totalLength = Math.max(t, this.data.length+r.length);
                this.data.addAll(r);
            }
            this.fireEvent("load", this, r, options);
            if(options.callback){
                options.callback.call(options.scope || this, r, options, true);
            }
        },
        
        trimRecords: function(data, params){
    			if(typeof params.start != "undefined" && typeof params.limit != "undefined" ) {										
    				r = data.getRange ( params.start, params.start+params.limit );							
    			}			
    			return r;
        },
        
        applySort : function(){			
    			
    			if(this.sortInfo && !this.remoteSort){
    				var s = this.sortInfo, f = s.field;
    				var st = this.fields.get(f).sortType;
    				var fn = function(r1, r2){
    						var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
    						return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
    				};        						
    								
    				this.allData.sort(s.direction, fn)				
    				var r = this.trimRecords ( this.allData, this.backParams );
    				this.data.clear();
    				this.data.addAll(r);
    								
    				if(this.snapshot && this.snapshot != this.data){
    						this.snapshot.sort(s.direction, fn);
    				}
    			} else {				
    				var r = this.trimRecords ( this.allData, this.backParams );
    				this.data.clear();
    				this.data.addAll(r);				
    			}
    		} 
    	
    });

  6. #6
    Ext User
    Join Date
    Feb 2008
    Posts
    3
    Vote Rating
    0
    kavi is on a distinguished road

      0  

    Smile sorting in pagination

    sorting in pagination


    hi,
    I have a grid with pagination, where pagination works fine, but the data is not getting sorted properly. I want the entire data to be sorted, but in my grid the data which is displayed in each page is only getting sorted... Is it possible to sort the entire data, at the client side before displaying it in the paging grid?

    Thanks

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Quote Originally Posted by kavi View Post
    hi,
    I have a grid with pagination, where pagination works fine, but the data is not getting sorted properly. I want the entire data to be sorted, but in my grid the data which is displayed in each page is only getting sorted... Is it possible to sort the entire data, at the client side before displaying it in the paging grid?

    Thanks
    Do you realize you are posting in an old version of ext forum?

    Check the FAQ on grids in my signature for your question. Basically, while you are paging the grid only has that page worth of data that it knows about. If you want to use paging and sort based on all data you need remoteSort: true and then the sorting is up to you to handle server side. That is the more 'common' way it is done. You can also use paging memory proxy extension to do more client side. you did not post your code, so I don't know which one you are trying to do.