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

    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

    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
    Houston, Tx


    I have presented your suggestion to our dev team.


  3. #3


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

    Ext.define('Company', {
        extend: '',
        fields: [
           {name: 'company'},
           {name: 'change',     type: 'float', convert: null,     defaultValue: undefined}
        idProperty: 'company'
    Ext.onReady(function() {
        // setup the state provider, all state information will be saved to a cookie
        // 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('', {
            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;
                    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);

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

    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

    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
    Vancouver, Canada


    Is this an issue in IE11?

    I used :

    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.


Posting Permissions

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