ExtJS Window with multiple grids and combined hbox/vbox layout renders very slow on Internet Explorer

Question

I have a window on which I want to put 4 grids like this

   Grid1 Grid2
   Grid3 Grid4

and I want the grids to auto resize on window resize.

It is simple to do this with combined hbox/vbox layout like I did in the example above:

  Ext.onReady(function () {
      var me = this;
      me.store = Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

      me.g1 = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
            flex: 1,
        store: me.store, 
        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' }
        ]
    })
    //g2,g3,g4 same with g1

       Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 400,
        width: 600,
         maximizable: true,
        layout: 'fit',
         items: [{
           xtype: 'container',
           layout: 'fit',
           items: [{
              xtype: 'container',
              layout: {
              type: 'vbox',
              align: 'stretch'
              },
              items:[{
            flex: 1,
            xtype: 'container',
        layout: 'hbox',
        items:[me.g1, me.g2]
          },{
            flex: 1,
            xtype: 'container',
        layout: 'hbox',
        items:[ me.g3, me.g4]
          }]
          }]
         }]
    }).show()
    });

Everything works fine on chrome (the window opens in 1 sec), but on Internet Explorer, the window renders between 3-5 seconds, which is too much.

I also tried to float those 4 grids right and left and it rendered much better on IE, but that way I lose auto scroll on grids (unless I put each one in a fit container...) and when i click a record the grid goes up a number of pixels (~20px)

Any ideas on how to do this to work good on IE as well, without those 3-5 secs of rendering?

I am using ExtJs 4.0.7.

PS: The problem is not the loading of grid stores, they come on callback.

Answer 1

You definitely have more nesting than you need, which can significantly slow down the layout. Try getting rid of the 2 outer containers so it looks more like this:

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 400,
    width: 600,
    maximizable: true,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items:[{
        flex: 1,
        xtype: 'container',
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items:[me.g1, me.g2]
    },{
        flex: 1,
        xtype: 'container',
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items:[me.g3, me.g4]
    }]
}).show()

You might also consider initializing your window as hidden, then just show/hide it as you need it instead of re-creating it each time.