1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    41
    Vote Rating
    0
    aendo is on a distinguished road

      0  

    Question Any Workaround for Poor Grid Rendering Performance with Many Rows

    Any Workaround for Poor Grid Rendering Performance with Many Rows


    Hi community,

    I'm new to JavaScript and Ext JS and having a problem using EditorGridPanel.
    Our users want to see 2,000+ rows at once.
    I know this will overkill the browser and indeed just 100 rows of data take as many as 10 seconds to render with all the other nice-looking components.

    I ran the Firebug profiling and it turned out the camelFn function is called most frequently, taking more than half of the overall processing time.
    I have taken a look at similar posts at this forum and there seems not to be a good workaround except for paging as far as 1.x goes.

    Are there any new workarounds to show the data at once with improvements in 2.0?
    If not, are there any other workarounds than paging?
    Paging would be the best alternative but I'm just wondering if anyone has any other possible workarounds.

    Thanks

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What is a human reader of the browser going to make of 2000 rows of data?

    What would be the point of splurging so much information into one page? Humans can't take that much in!

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    7
    Vote Rating
    0
    GnuDK is on a distinguished road

      0  

    Default


    The idea is to minimize the amount of ways of navigating through a collection of records. The grid currently contains a two-way-navigation: scrollbar+paging.

    Anyway. A nice trick is to render the grid itself before you load the data. The total speed of rendering is the same, but in this way the user shouldn't be feeling the same kind of delay. This trick creates the illusion of something going on, the whole time.
    Note that some of the delay is caused by the server when you request the data and 2k records is a lot of data.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Load the data in chunks.

    First call to load will be

    Code:
    ds.load({params:{start:0, limit:20}});
    Which will populate the visible part of the Grid quickly.

    Then at some point later, if necessary:

    Code:
    ds.load({params:{start:20}, add:true
    To add the rest (your script will have to understand that no "limit" parameter means splurge them all out.

  5. #5
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    1
    devnull is an unknown quantity at this point

      0  

    Default


    loadMask: true
    is also a way of letting the user know that something is going on at least. could probably even feed it a progress bar somehow if youre creative...
    As with most issues of this kind, there is probably a better way of doing things though. Find out what the user *really* wants. My guess is that they need to be able to find a specific record based on constantly changing criteria. A sorting/paging grid with a well designed filter setup would actually get them to what they need much faster in this case than scrolling 3 miles down to pick one record out of 2000.

  6. #6
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by Animal View Post
    What is a human reader of the browser going to make of 2000 rows of data?

    What would be the point of splurging so much information into one page? Humans can't take that much in!
    Agreed. Sometimes the client doesn't really know what's best. It makes no sense to put more than 100 or 200 rows of data on screen.

    Javascript was never designed to do what we're using it for - thus the speed issues will be an issue.

    HTML for that matter was not designed to pour out that much data. See how long it takes to render 2000 rows of HTML - i'm sure the actual file is pretty large.