View Full Version : Grid panel buffered AND paged

7 Feb 2014, 7:12 AM
I have a grid panel with a huge dataset. I've been using paging to manually go from page to page which works fine but for a reason I don't understand at the moment makes open/closing the datagrid really slow. (the finishedLayout method takes ages)

If I make the store a buffered store then the grid performs great, BUT the scrollbar for the grid is huge as it thinks its a infinte grid that can be scrolled all the way.

I've given the grid a page size, the paging toolbar still works but it lets you scroll passed the end of a page.

Any pointers?

10 Feb 2014, 8:29 AM
Those are conflicting design patterns. Think of buffered grid as vertical pagination.

Some theory to try:
What you *could* do is abstract the manual pagination from the grid and store itself.

the easy way
The Abstracted Pagination view would control a "behind the scenes store" that would bind to the pagination toolbar. This store would request the Thousands of data items from your server. After each "Page", that data can be shuffled loaded into a memory-buffered store, which powers a buffered grid view.

This is the easiest, but not hte fastest.

fastest, but more work on your end
The Abstracted Patination view would control an Ajax request extension to manage the request of the data. Here, you'd have to interpret the return from the server, and feed the pagination view with what it needs to know to determine page count (totalCount, etc). When the data loads, it is fed into a buffered memory store, which in turns feeds the buffered grid view.

The advantage to this approach is that the store data load "churn" (CPU expense) is only required once.
The disadvantage is that you would have to generate the custom event model to make this happen.

I believe that what you're looking to do is completely possible, but is not easily done out of the box. I wish i had the time to do a proof of concept.

10 Feb 2014, 9:34 AM
Cheers Jay that's got me thinking :-?

If I use the paging toolbar by itself (not docked inside the grid panel) which is using the buffered store. This store will contact the server for the data.
Also set the grid panel up to be bound to a local memory store, this local memory store is controlled by the paging toolbar.
(is that what you're meaning in your first idea?)

So I get the benifit of speed from the buffered store for the huge dataset and when the user clicks to get to the next page then when it gets the data - it will then write that to a local memory store. This is the store which the view (grid panel) will use. Can also set up the buffered store to request pages ahead or as the user is typing in the page number.

Question is - will it make it be as fast as using a buffered store by itself, but give what the customer wishes in having a paging toolbar...

Only time will tell. Thanks

10 Feb 2014, 9:37 AM
Yes, you'll get the best of both worlds. The only caveat is that individual pages may be large requests. These things take more server, db and network resources to accomplish. Also, the client will be required to store however many thousands of records, requiring more RAM. :)

10 Feb 2014, 9:55 AM
There may be a simpler approach using the paging toolbar and the bufferedrenderer plugin:

var store = new Ext.data.Store({
autoLoad : true,
fields : ['foo'],
pageSize : 10000,
proxy : {
type : 'ajax',
url : '/data/paged.php',
reader : {
root : 'data'

new Ext.grid.Panel({
renderTo : document.body,
width : 400,
height : 400,
title : 'Test',
store : store,
dockedItems : [
xtype : 'pagingtoolbar',
dock : 'bottom',
store : store
columns : [
text : 'Foo',
flex : 1,
dataIndex : 'foo'
plugins : [
ptype : 'bufferedrenderer'

So I set the pageSize of the store to 10,000 meaning the store will request 10,000 records from the server for each page but of course the store will only load one store at a time and the paging toolbar will then advance/rewind what page the store is on. So we load 10,000 records into the store at once and we then use the bufferedrenderer plugin to allow the grid to handle that many records without killing the browser. Now we have the built in paging support and a buffered grid.

10 Feb 2014, 10:11 AM

13 Feb 2014, 1:55 PM
Nice, indeed. I was actually just reading up on the plugins (such as bufferedrenderer) and wondering if I could do something with that. Seems like you've given a great solution - will hopefully be able to try it out tomorrow :D

13 Feb 2014, 1:56 PM
Nice, indeed. I was actually just reading up on the plugins (such as bufferedrenderer) and wondering if I could do something with that. Seems like you've given a great solution - will hopefully be able to try it out tomorrow :D

Great, excited to hear if it work out for you!