Results 1 to 4 of 4

Thread: Grid performance improvement suggestion.

  1. #1
    Sencha User
    Join Date
    Sep 2009

    Lightbulb Grid performance improvement suggestion.

    Hi folks..

    I think this post should be read by Jamie Avins, the brain of layout system.
    Studying about javascript performance improvement, thinking about it and making some tests... I have an idea to improve grid performance (can be applied to other things, but in grid the results would be awesome).

    Resizing columns of big grids (many, many rows) can be very slow.

    All we know thats because that's a lot of dom elements to resize and we also have the large amount of browser reflows.

    The standard process it's something like this:

    function simpleResize(){
        var size = Math.random() * 500 + 'px';
        var tds = document.getElementsByTagName( 'td' );
        for( var i = tds.length; i--; ){
            tds[i].style.width = size;
    Resizing must iterate over all TDs (column element inside grid), resizing each one of it (and waiting for the reflow).

    My idea is this:
    When rendering, grid can create a css class each column in this specific grid, using the internal auto-generated id, and store a reference to this css rule in the Column object. So when the user resizes the column, we don't need to iterate over several DOM elements. All we need to do is to update that css rule. And the browser will perform a single large reflow.

    The code sounds like this:
    function smartResize(){
        var size = Math.random() * 500 + 'px';
        var sr = document.styleSheets[0].cssRules[0]; 'width', size, 'important' );
    I made some tests, using a html table with 10,000 lines, and specially in Firefox, performance improvement was over 100% .

    I think this trick could be tested inside Ext GridPanels. What do you think?

  2. #2
    Sencha User
    Join Date
    Dec 2007
    Cocoa, FL


    Wait for Ext4....the new layouts as well as improvments they've made to the grid will show

  3. #3
    Sencha User
    Join Date
    Mar 2007
    The Netherlands


    A grid isn't a layout, so the layout system doesn't improve grid rendering, but Ext4 does change grid rendering too.

    Ext4 now uses a single <table> to render the rows. If you want to see how fast that is you can check out my TableGridView user extension for Ext 3, which also uses a single <table>.

  4. #4
    Sencha User
    Join Date
    Sep 2009


    I know that Ext4 seems to be much faster then Ext3.
    I know also, that grid is not a layout type, but this technique could be applied to layouts too.

    I believe that every component would be improved in Ext4, like said in SenchaCon, and I believe that grid would be much faster. My suggestion is something like that: if it is much faster, but still resizing DOM elements one by one (i don't know if it's true in Ext4, but if it's true...) this thing can still be improved a little more.

    Ext is a great product. Ext4 seems to be yet greater. The idea is to try to make it even better.

Similar Threads

  1. GridPanel performance improvement
    By shiweiwei97 in forum Community Discussion
    Replies: 14
    Last Post: 6 Oct 2011, 3:33 AM
  2. Docs improvement suggestion
    By mankz in forum Community Discussion
    Replies: 3
    Last Post: 14 Dec 2009, 7:56 AM
  3. Performance improvement
    By mavenn in forum Community Discussion
    Replies: 9
    Last Post: 23 Jan 2009, 9:18 AM
  4. performance improvement
    By fermo111 in forum Community Discussion
    Replies: 0
    Last Post: 7 Oct 2007, 6:01 PM
  5. Documentation Improvement Suggestion
    By maya in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 14 Apr 2007, 11:40 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts