ExtJS Grid, Poor Performance with High Frequency Updates?
I just began using ExtJS 3.2.1 and I’m concerned that there are usage patterns for these components that I am not aware of because the performance of the grid control is not as good as I was hoping for.
My goal is to use the ExtJS grid with a JSON data store. I am using a comet server (WebSync) to push JSON data to the client where the data is loaded into the JSON store. When I test my solution with small datasets (10 rows, 5 cols) the grid renders and updates great. However, when my dataset is larger (40 rows, 10 cols) performance begins to degrade to the point where the page seems to hang or crash.
Regarding the JSON data, the client listens to three types of data from the server in JSON format. The three data blocks represent 1) row adds, 2) row deletes, 3) row cell value changes.
An example of how the client would progress to a crash is as follows:
1. server sends a data block consisting of 40 rows, 10 cols worth of data to the client
2. client receives data block. store.loadData(datablock, true) is called. data is rendered to screen.
3. server sends a data block consisting of 40 rows, 10 cols worth of data
4. client receives data block. loops over data objects using store.GetByID() to find the matching store row. values in the row are updated and record.commit() is called to save changes. (client will receive these blocks, steadily, every 500 milliseconds)
Result: watch grid update quickly. then watch updates begin to slow. finally, watch the page crash
I am pushing relatively small chunks of data from the server to the client at the 500ms interval. In addition, I have created a windows forms solution that accepts the data pushed from the server at the 500ms interval and works great. so, I don't believe that this is related to latency transferring the JSON to the client.
General questions I have are:
Am I expecting too much? Is it not possible to update my datastore every half second and expect the grid to be responsive?