1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    68
    Vote Rating
    0
    Jonathan Feinberg is on a distinguished road

      0  

    Exclamation Column hide/show is very slow because of updateRule

    Column hide/show is very slow because of updateRule


    The code I posted was buggy. The subject is true, but I have no good alternative.
    Last edited by Jonathan Feinberg; 14 Apr 2007 at 11:16 AM. Reason: I was on crack.

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    68
    Vote Rating
    0
    Jonathan Feinberg is on a distinguished road

      0  

    Default


    Jack,

    Is there a reason that, instead of updating the rules that apply to the given column, you don't instead add a "x-hidden-column" class to the elements in question?

  3. #3
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Adding a css class to existing cells would probably be slower (depending on the number of rows). However, the big problem is it wouldn't work across changes to the data.

    How many columns/rows do you have? For me it is blazing fast. But my grids never have more than 25 rows/5-6 columns.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    68
    Vote Rating
    0
    Jonathan Feinberg is on a distinguished road

      0  

    Default


    Quote Originally Posted by jack.slocum View Post
    How many columns/rows do you have? For me it is blazing fast. But my grids never have more than 25 rows/5-6 columns.
    For a table with 0-10 rows and 10 columns in the model, it takes .75 seconds to show/hide 3 columns.

  5. #5
    Ext User MarkT's Avatar
    Join Date
    Mar 2007
    Location
    Boston, MA, USA
    Posts
    61
    Vote Rating
    0
    MarkT is on a distinguished road

      0  

    Default updateRule = SLOW

    updateRule = SLOW


    I used Firebug's profile feature to see why the Grid was so slow during a resize, and it was clearly updateRule. I came upon this article from Microsoft in which they say to avoid switching classes and style rules.

    Faster DHTML in 12 Steps

    I'm sure there must be a way to change the width of the columns without calling updateRule. I think updateRule was needed because the Grid's cells were in span and div elements, but from what I can see in the beta-2 GridView.js code it looks like they are now in an actual table.

    With each new release, the code has gotten better. Thanks. I'm looking forward to the next one.

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    I have some ideas for GridView3 - let get an official release of 2 out first though.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

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

      0  

    Default


    What about each column being a float:left div? Each cell would be a regular div, and they'd just stack up in the columns.

    Column resizing and moving might be fast then. No need to manipulate stylesheet rules, just operate directly on the column div.

    Of course there would then be the problem of ensuring that all the cells in a row have the same height, so you might just be shifting the problem from one dimension to another!.

  8. #8
    Ext User MarkT's Avatar
    Join Date
    Mar 2007
    Location
    Boston, MA, USA
    Posts
    61
    Vote Rating
    0
    MarkT is on a distinguished road

      0  

    Default setWidth or setStyle on TD in THEAD?

    setWidth or setStyle on TD in THEAD?


    Looking at the beta-2 "Array Grid Example" with Firebug it looks like the rows of the Grid are all in a table.

    The table has no THEAD, just a TBODY. Why not add a THEAD with one row in it, and simply change the "style" of the cells in the THEAD with the new width? It should be much faster than using updateRule.

  9. #9
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    MarkT, I tried your suggestion early on but setting the width of cell is not respected cross browser (tables have their own layout rules, even with table-layout:fixed; ).

    I don't know how many times I can say this:

    The problem has nothing to do with updating the CSS rule.

    I have investigated this to the max and the problem is it causes a reflow of many elements and for a large DOM that is slow. If you set the width of 1 element and it causes a width shift that causes a reflow for for a bunch of other elements, it has the same lag as updating the rule.

    The only way I have found to speed it up is to make a stripped down grid view that doesn't do text truncation and therefore has less elements to reflow. Hiding overflow seems to be the bottleneck in my tests.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

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