PDA

View Full Version : [CLOSED] buffered grid rendering slowly



EddieJensen
Feb 13, 2013, 2:44 AM
Hi everyone :)


I am new to Ext.JS/Net and javascript and web programming in general so I have probably made lots of newbie mistakes.
I am going to include a fair bit of detail so that I don't miss anything important.
I have been trying to implement a buffered grid following these articles:

http://www.sencha.com/blog/first-look-at-ext-js-4-2-grid
http://www.sencha.com/forum/showthread.php?185483-Grid-buffered-infinite-scrolling-in-4.1

I seem to have it up and working however it's not achieving the desired result; to improve the overall speed of rendering the grid especially when re-sizing.


The app I'm writing is in C# and using MVC, my Ext is mixed between Razor view's and raw javascript.
The design calls for a lot of windows with partial views delivering the extjs components to the window's using a window's loader object to load components.

When the window containing a grid gets a large amount of grid rows the re-size event starts to slow down, the more rows the slower it takes.
When you load some 5,000 rows into the grid the re-sized takes something like 10 seconds. the grid currently has about 10 rows but it will eventually have a lot more so this slow down will likely increase. Also when a lot of rows are loaded the entire window and all the other windows and forms loaded in the browser start to become slow to respond.

Another complication is that the grid uses client side sorting and filtering and ideally I would keep this.

The idea behind using a buffered grid is obviously to speed up the grid by caching records in pages etc etc but when I follow the article above and make the store's leadingBufferZone very large, page size = 30 and the purgePageCount 0 to fetch all the data to the client side. I am using a vertical scroller with NumberFromEdge = 10, TrailingBufferZone = 20 and LeadingBufferZone = 20.

The problem as stated is that while the grid scrolls quickly the whole page becomes sluggish and the re-size is very slow.

so, am I doing something wrong?
Is what I'm trying to do even possible at all, as in if I fetch all the data to the client side and set up the grid correctly so that it renders quickly?

My co-worker has set up a page that uses something called JQ-grid which I believe is a J-Query UI grid that does exactly what I am looking for, all ros loaded up front with client side filtering and sorting.

Is this possible and if so how?


Thanks very much!

geoffrey.mcgill
Feb 13, 2013, 3:43 AM
Welcome.

5000 records is a LOT of information to load into the client.

With that many records, you're better to investigate server-side paging, sorting and filtering.

I'm also not exactly sure what you mean by 're-size'.

Daniil
Feb 13, 2013, 6:07 AM
Hello,


5000 records is a LOT of information to load into the client.

Agree, but it might be OK. Here 5000 records are loaded at once.
http://examples2.ext.net/#/GridPanel/Infinite_Scrolling/Buffered_Scrolling/

But rendering speed highly depends on amount of columns.

Re: sorting and filtering

Both - client and server side sorting and filtering should work with the Ext.NET from the SVN trunk (which is currently based on ExtJS 4.2 beta 2).

What Ext.NET version do you test against? If v2.1 release, then yes, as far as I can know client side sorting and filtering don't work in this version (and in underlying ExtJS 4.1 as well).

Also there were performance improvements in ExtJS 4.2 regarding buffer rendering comparing to ExtJS 4.1. Previously, it rerenders a whole page of records on scrolling, but now it renders just new records.

Ideally, please provide a sample and steps to reproduce the problem.

EddieJensen
Feb 13, 2013, 9:51 PM
Hi Geoffrey and Daniil,

Geoffrey: I know that 5000 row's is a lot, however this is the upper limit of what would be in the grid. More realistically we are looking at several hundred to a thousand rows. What I mean by 're-size' is that the grid is loaded into a window panel and there is a re-size event hooked up to that window. When the user re-sizes the window the contents of that window including form fields and the grid all get re-sized and positioned by the event function. That function call slows right down when there are tons of rows in the grid.


Daniil: I am using Ext.Net 2.1 but I am interested in using the beta code, can you please link me to where I can find the SVN repository?

thanks very much for your replies!

Cheers,
Eddie

Daniil
Feb 14, 2013, 6:02 AM
When the user re-sizes the window the contents of that window including form fields and the grid all get re-sized and positioned by the event function. That function call slows right down when there are tons of rows in the grid.


What is the function?



Daniil: I am using Ext.Net 2.1 but I am interested in using the beta code, can you please link me to where I can find the SVN repository?


It is here.
http://svn.ext.net/premium/trunk/