Results 1 to 10 of 10

Thread: Grid determineScrollbars performance degradation

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Barcelona
    Posts
    33

    Default Grid determineScrollbars performance degradation

    Hi,

    I've got a grid with a fairly large number of columns (~100) placed inside a TabPanel which is also placed inside another TabPanel.

    I've noticed that the function "determineScrollbars" from "Ext.panel.Table" approximately doubles its execution time when placed inside a TabPanel
    compared to having a grid placed inside a Conatainer.


    Below I provide a 3 test cases with different levels of component nesting:

    1) Case 1 :
    Code:
        Panel
           Grid
    
        times:
            CHROME : 837ms
            FF 4   : 4061ms
    2) Case 2
    Code:
       TabPanel
          Panel
             Grid
    
        times:
            CHROME : 2373ms
            FF 4   : 8107ms

    3) Case 3
    Code:
      TabPanel
            TabPanel
                Panel
                    Grid
        times:
    
            CHROME : 5604ms
            FF 4   : 14264ms
    Here's the code needed to replicate the cases:


    PHP Code:
    <HTML>
    <
    HEAD>
        <
    LINK REL='stylesheet' TYPE='text/css' TITLE="standard" HREF='resources/css/ext-all.css' >
        <
    SCRIPT TYPE='text/javascript' LANGUAGE='javascript' SRC='ext-all-debug-w-comments.js?'></SCRIPT>

        <script>
        /**
         *
         * Ext.ux.data.PagingMemoryProxy plugin
         *
         *
         *
         */
        Ext.define('Ext.ux.data.PagingMemoryProxy', {
            extend: 'Ext.data.proxy.Memory',
            alias: 'proxy.pagingmemory',
            read : function(operation, callback, scope){
                var reader = this.getReader(),
                    result = reader.read(this.data),
                    sorters, filters, sorterFn, records;

                // filtering
                filters = operation.filters;
                if (filters.length > 0) {
                    //at this point we have an array of  Ext.util.Filter objects to filter with,
                    //so here we construct a function that combines these filters by ANDing them together
                    records = [];

                    Ext.each(result.records, function(record) {
                        var isMatch = true,
                            length = filters.length,
                            i;

                        for (i = 0; i < length; i++) {
                            var filter = filters[i],
                                fn     = filter.filterFn,
                                scope  = filter.scope;

                            isMatch = isMatch && fn.call(scope, record);
                        }
                        if (isMatch) {
                            records.push(record);
                        }
                    }, this);

                    result.records = records;
                }

                // sorting
                sorters = operation.sorters;
                if (sorters.length > 0) {
                    //construct an amalgamated sorter function which combines all of the Sorters passed
                    sorterFn = function(r1, r2) {
                        var result = sorters[0].sort(r1, r2),
                            length = sorters.length,
                            i;

                            //if we have more than one sorter, OR any additional sorter functions together
                            for (i = 1; i < length; i++) {
                                result = result || sorters[i].sort.call(this, r1, r2);
                            }

                        return result;
                    };

                    result.records.sort(sorterFn);
                }

                // paging (use undefined cause start can also be 0 (thus false))
                if (operation.start !== undefined && operation.limit !== undefined) {
                    result.records = result.records.slice(operation.start, operation.start + operation.limit);
                }

                Ext.apply(operation, {
                    resultSet: result
                });

                operation.setCompleted();
                operation.setSuccessful();

                Ext.callback(callback, scope || me, [operation]);
            }
        });

        //backwards compat.
        Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;





        // OVERRIDE TO MEASURE TIMES
        Ext.override(Ext.panel.Table, {
            determineScrollbars : function() {
                console.time("determineScrollbars");
                this.callOverridden();
                console.timeEnd("determineScrollbars");
            }
        })



            Ext.onReady( function() {

                var numHeaders =  100;
                var numRows    =  100;
                var fields     = [];
                var data       = []

                // Fields array
                for (var idx = 0; idx < numHeaders; idx++) {
                    fields.push(Ext.id());
                }

                // Dummy Data
                for (var r = 0; r < numRows; r++) {
                    var row = [];
                    for (var h = 0; h < numHeaders; h++) {
                        row.push(parseInt(Math.random()*10000))
                    }
                    data.push(row)
                }


                // Define data model
                // We use a PAGINGMEMORY  proxy
                Ext.define('table_test',{
                    extend : 'Ext.data.Model',
                    fields : fields,
                    proxy  : {
                        type : 'pagingmemory',//'memory',
                        reader : {
                            type : 'array'
                        }
                    }
                })


                var store = Ext.create('Ext.data.Store', {
                    remoteGroup     : false,
                    remoteSort      : false,
                    model           : 'table_test',
                    data            : data,
                    pageSize        : 40,
                })

                // Build columns array
                var columns = [];
                for (var c = 0; c < numHeaders; c++) {
                    columns.push({
                        xtype :'numbercolumn',
                        text : 'Column '+ c,
                        width : 75,
                        dataIndex : fields[c]
                    })
                }

                var grid = Ext.create('Ext.grid.Panel',{
                    height : 400,
                    columns : columns,
                    store   : store,
                    tbar    :  Ext.create('Ext.toolbar.Paging', {
                        store           : store,
                        hideBorders     : true,
                        prependButtons  : true,
                        displayInfo     : true,

                    })
                })


                /*
                * CASE  1
                *
                *   determineScrollbars:
                *
                *      CHROME : 837ms
                *      FF 4   : 4061ms
                */
    /*
                var container =  Ext.create('Ext.panel.Panel', {
                    items       : [grid],
                    title       : 'PANEL 1',
                    renderTo    : 'my_test_div'
                })
    */
                /*
                 * CASE 2
                 *
                 *  determineScrollbars:
                 *
                 *      CHROME : 2373ms
                 *      FF 4   : 8107ms
                 */
    /*
                var tab1 =  Ext.create('Ext.tab.Panel', {
                    items  : [
                        Ext.create('Ext.panel.Panel', {
                            items       : [grid],
                            title       : 'PANEL 1',

                        })
                    ],
                    renderTo : 'my_test_div'
                })
    */
                /*
                 * CASE 3
                 *
                 *  determineScrollbars:
                 *
                 *      CHROME : 5604ms
                 *      FF 4   : 14264ms
                 */

                var tab1 =  Ext.create('Ext.tab.Panel', {
                    items  : [
                        Ext.create('Ext.tab.Panel', {
                            title       : 'PANEL 2',
                            items  : [
                                Ext.create('Ext.panel.Panel', {
                                    items       : [grid],
                                    title       : 'PANEL 1',

                                })
                            ]
                        })
                    ],
                    renderTo : 'my_test_div'
                })


            });

        </script>
    </HEAD>
    <BODY>
        <div id='my_test_div'>

        </div>

    </BODY>
    </HTML> 

    Am I doing something wrong?

    I know I should avoid overnesting components, but in the example provided the performance degradation is astonishing with just 3 levels of nesting.

    Any ideas?

    Thanks in advance,

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045

    Default

    I've found that grids with flexed columns or with panel forceFit on display this behavior. If you don't set widths, or set them fixed, it doesn't seem as bad in my case.

    Well done on the detailed replication, as well as the observations on nesting!

    stevil

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Barcelona
    Posts
    33

    Default

    Hi,

    Thanks for the response,

    I've found that grids with flexed columns or with panel forceFit on display this behavior. If you don't set widths, or set them fixed, it doesn't seem as bad in my case.
    ,

    In the case I presented, I don't set forceFit on and all columns have a fixed size!!

    Any other ideas?

    I believe this is an Ext-4 bug. In Ext3 the performance with a large number of columns was ok.

    I've attached the profile within the function "determineScrollbars", in case that helps someone....


    Thanks!
    Attached Images Attached Images

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045

    Default

    There are a couple of threads on performance, including as related to grids. I'm currently keeping my mouth shut until I see 4.01 or 4.02, and then I'll re-evaluate.

    stevil

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    394

    Default

    I hope we see a bug fix release soon...

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045

    Default

    Quote Originally Posted by rich02818 View Post
    I hope we see a bug fix release soon...
    A post by Ed last week suggested this week for 4.01, and around the 25th/end of month for 4.02.

    stevil

  7. #7
    Sencha User
    Join Date
    Dec 2010
    Posts
    1

    Default

    If you try to hide/show columns in the sample provided, u will get the same terrible performance.

    Even if it is 1 level nesting. (document->body->panel->grid)

    But if you render the grid directly into the document body, it runs just fine. (Still looks slower than Ext3.3 but at least not terrible)

  8. #8
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045

    Default

    Quote Originally Posted by maras54 View Post
    But if you render the grid directly into the document body, it runs just fine. (Still looks slower than Ext3.3 but at least not terrible)
    +1

  9. #9
    Ext JS Premium Member
    Join Date
    Apr 2011
    Location
    Dallas, TX
    Posts
    204

    Default

    One other thing about this example.

    Vertical and Hortizontal Scrolling:
    Safari(Mac) - Fast
    Chrome (Mac) - Slow

    I see the same thing with my app. Scrolling (as in with the scroll wheel or Magic Mouse) is very slow in Chrome.

    However, scrolling on a similar grid with Ext 3.3 code is fast.

  10. #10
    Sencha User
    Join Date
    Oct 2009
    Posts
    1

    Default

    I am observing this degradation in 4.0.1 also. Does anyone know of a fix/workaround.

Similar Threads

  1. performance degradation in 1.0.1a and documentation inconsistencies
    By pgdavid in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 28 Feb 2011, 3:45 AM
  2. Performance degradation in IE 7.0
    By tropigeek in forum Community Discussion
    Replies: 1
    Last Post: 17 Dec 2008, 1:48 AM
  3. Graceful degradation using Panel
    By rob.agar in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 5 Dec 2007, 5:52 PM
  4. Many Combos - performance degradation
    By mapo in forum Sencha Ext JS Q&A
    Replies: 4
    Last Post: 10 Jul 2007, 12:46 PM
  5. Graceful degradation?
    By mirage in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 27 Apr 2007, 10:11 AM

Posting Permissions

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