1. #1
    Ext Premium Member
    Join Date
    Sep 2009
    Posts
    76
    Vote Rating
    0
    ddanny is on a distinguished road

      0  

    Default Low performance grid

    Low performance grid


    I have the following issue while using the com.extjs.gxt.ui.client.widget.grid.Grid widget: it seems like the performance is really low.

    The grid I build has 3 columns, the cells on the first 2 having text, while the third is populated by some small colored squares.
    A setInnerHTML() is called at some moment for each cell in this column and up to 200 small squares defined like below fit in each cell. There can be around 100 such rows in a grid.
    Code:
    <a title="" href="" target="_blank" class="color-969696 x-color-mbox1"><em><span style="background:#969696" unselectable="on"> </span></em></a>
    So, the number of these small squares can be really big. The problem we have is that while this grid is displaying, the performance of the entire application is really slow.
    I imagine this can be caused by the browser repainting the content of the grid? On Firefox the performance is much lower than in IE.

    Of course, if we reduce the number of such squares to just a few 1000s, the performance improves proportionally.

    Are there any tweaks we can try in order to improve this?
    Is there a way to make the content of the grid repainting only is some conditions? Or have it repaint only the visible parts?

    Regards,

    Dan

  2. #2
    Ext User dpope22's Avatar
    Join Date
    Apr 2008
    Location
    San Antonio, TX
    Posts
    35
    Vote Rating
    0
    dpope22 is on a distinguished road

      0  

    Default


    You can try to set the View of your grid to a BufferedView. This view will only render("paint") the rows that are visible.
    Rackspace Software Developer

  3. #3
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
    Arno.Nyhm is on a distinguished road

      0  

    Default


    other idea is to use a button to display the color palette only on demand like in this case:

    http://www.extjs.com/forum/showthrea...ht=button+grid

    an other idea is to reduce the generated html code of your sample. you realy need the a and the em tags?
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041

  4. #4
    Ext Premium Member
    Join Date
    Sep 2009
    Posts
    76
    Vote Rating
    0
    ddanny is on a distinguished road

      0  

    Default


    Thank you both for the suggestions.
    I have followed them both. It looks like there are some issues with the BufferView in Firefox. It seems like the row height is not automatically increased when the content doesn't fit.
    I am calling setForceFit(), but the same result. It works fine with IE, but not with Firefox.

    Does anyone has an idea?

    Regards,

    Dan

  5. #5
    Ext User dpope22's Avatar
    Join Date
    Apr 2008
    Location
    San Antonio, TX
    Posts
    35
    Vote Rating
    0
    dpope22 is on a distinguished road

      0  

    Default


    BufferView has a couple of restrictions that the GridView does not. It requires a constant height for all rows in your grid, and according to the API, it doesnt allow for expanding rows. I'm using BufferView with constant row height and its working for me FF, IE, and Chrome.
    Rackspace Software Developer

  6. #6
    Ext Premium Member
    Join Date
    Sep 2009
    Posts
    76
    Vote Rating
    0
    ddanny is on a distinguished road

      0  

    Default


    Actually, it looks like it does expand the row height in IE, but not in Firefox. At least this is how it behaves for me. I would like to make it somehow to behave in FF the same as in IE.

    Dan

  7. #7
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
    Arno.Nyhm is on a distinguished road

      0  

    Default


    then use a fixed row height or not use the BufferView!
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041

  8. #8
    Ext Premium Member
    Join Date
    Sep 2009
    Posts
    76
    Vote Rating
    0
    ddanny is on a distinguished road

      0  

    Default


    Great! Thanks a lot for your suggestion. It brings me back where I started and with no progress at all.

    Dan

  9. #9
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
    Arno.Nyhm is on a distinguished road

      0  

    Default


    then please describe your main goal what you try to show and show a screenshot. maybe other great ideas comes with more input from you.
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041

  10. #10
    Ext Premium Member
    Join Date
    Sep 2009
    Posts
    76
    Vote Rating
    0
    ddanny is on a distinguished road

      0  

    Default


    Please see the attached screenshot. You can see a lot of small gray squares that change color based on some external input.
    Seeing the amount in the screenshot and the scroll bar, you can deduce that there are around 10000+ such squares in that column of the table.

    Using the regular Grid is really slow with so many squares, especially in Firefox, where it slows down everything.
    Using the BufferView improves the performance when that window is not expanded (when a much smaller amount of squares are visible) but in Firefox again, there are always 2 rows for each line (or 2 lines for each table row), never less, never more, no matter how many squares I have, if they fit or not in 2 lines.
    Attached Images

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi