Extjs GridPanel Performance on Huge data
I need a suggestion on use of EXTJS grid. My requirement is I need 4 TabPanel. Each of the TabPanel has a GridPanel. The grids have 150 columns to show in each and around 200 rows each grid. Moreover 15 columns in each grid has a renderer. The performance of the grid become very slow. I created my own component extending the panel. Their I have added the grid Panel. I Load this component in first page and later In each request I create a component. To load the data for each grid it is taking 16 seconds. Once the data is loaded to toggle between the tabs is taking 5 seconds to respond. Not only that the scroll bar is taking time to scroll. I use firefox as well as IE 8. In IE 8 profiler I see the following trace. Please suggest me if there is any way to improve the performance. It is a requirement by my client. They want excel like application.
Here is the profiler trace:
The core idea is you can not render this amount of DOM elements at once. Look how google spreadsheets are implemented and try to do the same - have a virtual view and when a user wants to see a particular region - render only the region visible on the screen.
If you want to make a user experience more smooth - try to guess what he is going to do and prefetch block of data. For example, if a user moves to the right, render not only active columns, but also prepare next columns (and request data from a server).