1. #1
    Sencha User mantonovic's Avatar
    Join Date
    Feb 2009
    Location
    Lugano, Switzerland
    Posts
    3
    Vote Rating
    0
    mantonovic is on a distinguished road

      0  

    Default Rendering performance updating a grid with big stores

    Rendering performance updating a grid with big stores


    ExtJS version: 4.0.7

    Hi All,
    I am working on an editable panel grid with an ArrayStore that can contain more then 1000-4000 rows.
    Users can edit single rows using the Row Editing Plugin (that works nice), but I developed also a functionality that allows user to apply changes to all the selected data within the grid.

    There are some performance problem when the selected data became large. While applying the changes looping over the selected records in the store is fast, but the Grid is refreshing terribly slow.

    After some attempts I found an acceptable solution, that I would like to share with you and maybe get some advice about this topic.

    1. Slower grid rendering:
    Code:
    var recs = grid.getSelectionModel().getSelection();
    store.suspendEvents(true);
    for (var i = 0; i < recs.length; i++) {
        recs[i].set(column, applyChanges());
    }
    store.resumeEvents();
    2. More faster code :
    Code:
    var recs = grid.getSelectionModel().getSelection();
    store.suspendEvents();
    for (var i = 0; i < recs.length; i++) {
        recs[i].set(column, applyChanges());
    }
    store.resumeEvents();
    grid.reconfigure(
        store,
        columns);
    Here some simple benchmarks I've done (values in ms) with a store of 1008 records:

    Selected records 1 - Calculations 1 - Grid refresh 2 - Calculations 2 - Grid refresh
    31 32.35 2001.4 26.6 1755.75
    144 140.6 13596.1 127.4 1793.3
    288 251.5 32773.5 251.75 1857.25
    504 516 73029.5 464.5 1917
    1008 998 237769 925 2173



    Do you think there other better solutions?

    Best regards

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Using reconfigure is always going to be faster than rendering each. This is your best bet.

    Scott.

  3. #3
    Sencha User mantonovic's Avatar
    Join Date
    Feb 2009
    Location
    Lugano, Switzerland
    Posts
    3
    Vote Rating
    0
    mantonovic is on a distinguished road

      0  

    Default


    Good to know..

    Thanks for your reply

    Cheers

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

      3  

    Default


    Store.suspendEvents(true) just queues them all up. So it won't affect perf.

    You need to suspend events, perform the update, then resume events, then just call refresh on the view.

    No need to go so far as to reconfigure.

  5. #5
    Sencha User mantonovic's Avatar
    Join Date
    Feb 2009
    Location
    Lugano, Switzerland
    Posts
    3
    Vote Rating
    0
    mantonovic is on a distinguished road

      0  

    Default


    Animal you are right I lauched the test (on a new and better machine) and the results are definitely much much more better then with reconfigure.

    Code:
    var recs = grid.getSelectionModel().getSelection();
    store.suspendEvents();
    for (var i = 0; i < recs.length; i++) {
        recs[i].set(column, applyChanges());
    }
    store.resumeEvents();
    grid.getView().refresh();



    Selected records Grid refresh Grid reconfigure
    1008 556.5 1322.875


    Thanks

    Best regards

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