View Full Version : pageSize works for Toolbar but not for Grid - Ext JS

19 Mar 2014, 11:13 AM
I have a store with an ajax proxy that sends a query to a database based on user input.
My pagingToolbar reads all records returned from the JSON response, and divides them according to my pageSize.

However, my grid displays all the results, regardless of the pageSize defined.
I don't have the power to add any server-side Start/Limit logic, and the params start and limit don't seem to limit the results from my store.load() function. (I see all the JSON results returned in my console)

Is it possible to implement some post-processing function to limit the number of results displayed on each page and have it correspond to my pagingToolbar? My guess is to place some script in the beforeload listener on my store definition, but I've no idea how to achieve this.

Here's my grid:http://i.stack.imgur.com/a09Nw.png
A store example:

var store = Ext.create('Ext.data.Store', {
autoLoad :
false, model :
model, pageSize: 5,
proxy: {
type : 'ajax',
url : 'MyServlet',
reader: { type : 'json', root : 'mydata' }
listeners : {
beforeload: function(store, operation, options){
//set limit of each page, do so and so onClick of "next" button, etc.

Something weird I've noticed, when I define buffered: true on my store, the pageSize works and I only see n number of results, although when I click next the data doesn't change and a buffered grid is not what I'm going for \_(?)_/

-P.S. I am way to lazy to fix the formatting on my code because this Editor is awful

19 Mar 2014, 1:37 PM
How many records are being sent back from server? Should only be 5 ( in your case ) and then the count of all the records so the paging can calculate the pages.

It is common mistake to think that the paging will filter your data.
page1 : SELECT * FROM table LIMIT 0,5
page2 : SELECT * FROM table LIMIT 6,5

19 Mar 2014, 1:38 PM
I don't have the power to add any server-side Start/Limit logic

I just noticed this ...

I guess you could truncate your resulting data .. not very efficient.

How many records in your table? perhaps bufferedRenderer instead?

19 Mar 2014, 2:02 PM
Thanks for the reply Scott,

I could get up to 500 results back on certain searches, and I have been looking into a buffered store. I can't wrap my head around the difference between a buffered store/infinite scroll and just returning all the results back at once.

Would a buffered store be your personal preference?

19 Mar 2014, 2:26 PM
I would recommend using bufferedRenderer for that amount of records .. simple plugin with a few config settings.

The buffered store is for a huge amount of records and actually calls the BufferedRenderer to help manage the buffering.

The infinite grid example is simply a grid example that uses the buffered store.

Here is some extra info:

19 Mar 2014, 2:43 PM
Alright will do, thanks a lot buddy

15 May 2015, 10:43 AM
This does not work, just get a scroll bar at the bottom of the grid, no data shows. Using, the infinite-scroll.js example does not use the plugin as shown either.

datastore has
buffered: true,
// trailingBufferZone: 5,
leadingBufferZone: 20,
pageSize: 10,

xtype: 'grid' has
,plugins : [{
ptype: 'bufferedrenderer',
trailingBufferZone: 5,
leadingBufferZone: 5,
scrollToLoadBuffer: 10
,onViewResize: function(view, width, height, oldWidth, oldHeight) {
// Only process first layout (the boxready event) or height resizes.
if (!oldHeight || height !== oldHeight) {
var me = this,
if (view.all.getCount()) {
// We need to calculate the table size based upon the new viewport size and current row height
delete me.rowHeight;
scrollRange = me.getScrollHeight();
newViewSize = 18;
me.viewSize = me.setViewSize(newViewSize);
me.stretchView(view, scrollRange);