1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    5
    Vote Rating
    0
    biplab.dutta is on a distinguished road

      0  

    Default Extjs GridPanel Performance on Huge data

    Extjs GridPanel Performance on Huge data


    Hi,
    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:

    profiler_1.jpg

    Please suggest.

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Posts
    64
    Vote Rating
    0
    ZeusTheTrueGod is on a distinguished road

      0  

    Default


    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).

    Good luck!

Thread Participants: 1