Results 1 to 6 of 6

Thread: [4.1.1] IE9 showing load mask on grid is slow

    You found a bug! We've classified it as EXTJS-6802 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1

    Default [4.1.1] IE9 showing load mask on grid is slow

    Hello,
    showing load mask on grid with a lot of rows is veeerryy slow. On my laptop (with cpu Core i7 2760QM) it takes about 5 seconds to show load mask over grid with 5000 rows. The problem occurs only in IE9. Javascript profiler shows, that a lot of time is spent in method Element.adjustDirect2DDimension, setting

    Code:
    Ext.supports.Direct2DBug = false;
    "fixes" the problem. I think you should fix IE9 Direct2D dimension rounding bug differently, because method used in Ext Js 4.1.1 is very slow.

  2. #2
    Sencha - Support Team
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410

    Default

    I have presented your suggestion to our dev team.

    Regards,
    Scott.

  3. #3

    Default

    Grids with a few thousands rows have serious performance problems in IE8, IE9.

    Showing load mask over grid with 5000 rows takes 9800 ms seconds (in IE9).

    Showing message box over grid with 5000 takes 3700 ms in IE9, 1500 ms in IE9 switched to IE8 mode.


    Here is my the test code ...

    Code:
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*'
    ]);
    
    Ext.define('Company', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'company'},
           {name: 'change',     type: 'float', convert: null,     defaultValue: undefined}
        ],
        idProperty: 'company'
    });
    
    Ext.onReady(function() {
        Ext.QuickTips.init();
        
        // setup the state provider, all state information will be saved to a cookie
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    
        // sample static data for the store
        var myData = [];
        for(var i = 0;i<5000;i++) {
             myData.push(['c' + i, (i0)/100 ])
        }
    
    
        // create the data store
        var store = Ext.create('Ext.data.ArrayStore', {
            model: 'Company',
            data: myData
        });
    
        // create the Grid
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            stateful: true,
            collapsible: true,
            multiSelect: true,
            stateId: 'stateGrid',
            columns: [
                {
                    text     : 'Company',
                    flex     : 1,
                    sortable : false,
                    dataIndex: 'company'
                },
                {
                    text     : 'Change',
                    width    : 75,
                    sortable : false,
                    dataIndex: 'change'
                }
            ],
            height: 350,
            width: 600,
            title: 'Array Grid',
            renderTo: 'grid-example',
            viewConfig: {
                stripeRows: true,
                enableTextSelection: true
            },
            buttons: [
                {text:'Mask', handler: function(){
                    var start = new Date().getTime();
                    grid.setLoading('Loading ...');
                    var elapsed = new Date().getTime() - start;
                    grid.setLoading(false);
                    Ext.Msg.alert('Status', 'time to show mask: ' + elapsed);
                  }
               },
                {text:'Nothing doing', handler: function(){
                    var start = new Date().getTime();
                    Ext.Msg.alert('Status', 'test');
                    new Ext.util.DelayedTask(function(){
                      var elapsed = new Date().getTime() - start;
                      window.alert('time to show message box:' + elapsed);
                    }).delay(0);
                  }
               },
    
            ]
        });
    });

  4. #4
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    62

    Exclamation Also very much affects 4.0.7

    This issue also affects 4.0.7 quite a bit on grids with a large amount of columns and rows, and even those with smaller numbers. Disabling the setting helps IE9 performance dramatically in our tests.

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    8

    Default Bump

    This also applies in 4.1.3 and 4.2.1.

    In IE9 and 4.2.1, a grid with 87 rows took 1.953s to show a loading mask.

  6. #6
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    261

    Default

    Is this an issue in IE11?

    I used :

    Code:
    Ext.supports.Direct2DBug = false;
    in my app and after we upgraded to IE11, I started to see tooltip wrapping issues in tree panels and grid panels. Basically some tooltips were truncated when they shouldn't have been (if the tooltip contained two words the tooltip showed only one word and the second one was below and cut off - but not for all cells).

    I want to remove this statement and I was curious to find out if this is still an issue in IE11.

    Thanks

Posting Permissions

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