ExtJS Capable of handling Grids/Datastors of ~1000 elements?

Question

I have a JavaScript application which opens an ExtJS Window, containing an ExtJS TabPanel, which has a tab containing a Data Grid, showing approximately 900 - 1000 rows, each with 7 columns of text fields. The grid may also be filtered to show about 100 rows at a time. When the window opens, navigating to this tab can cause Firefox or Safari to spin/lock up for over 60 seconds...

This is Ext 2.2

I know it's very hard to say without code... but without seeing code, my question is: Should ExtJS be capable of displaying a grid of so much data? In trying to optimize should I be looking at my code, or is ExtJS itself the problem? Is anyone using ExtJs to display such large grids?

Answer 1

I'm not doing it within Window/TabPanel (grid is shown directly within main page body) but I doubt that matters. Yes, Ext 2.2 should and does handle 1000 rows reasonably well (there's some delay, but it's certainly not 60 seconds).

Things to consider:

1. How are you reading the data? Does it take 60 seconds to actually render the data or is significant part of it taken by data loading?
2. Can you paginate in, say, increments of 100? Or, if not, lazy load?
3. Is there anything else happening on this page perhaps that results in this delay?

Answer 2

Hi,

Not sure as I have not used it myself but I did come across this when looking at grid components myself.

Buffer ExtJS Grid

Can you also limit pages to rendering fewer rows? or is there a need to have 1000 per page (quite a lot for users to look at). You might find for example 250 more usable and more efficent at the same time?

Answer 3

ExtJS itself can handle that many rows - we have a grid that we've capped at 1000 rows on the server, but the page renders with no problems - certainly not taking 60 seconds.

Some other questions:

• Are you sending the data in XML or JSON format? We're using JSON loading it directly into a JsonStore.
• Are you doing any processing of the data before it's rendered?
• What specific grid class are you using?

Answer 4

Paging will help. Here is an example that will do the job: http://abreakorcontinue.blogspot.com/2010/05/extjs-grid-with-aspnet-mvc-backend.html