Looking to create a window with 4 grids positioned as follows:
Grid1 Grid2
Grid3 Grid4
These grids should automatically resize when the window is resized.
To achieve this layout, I used a combination of hbox/vbox in the example below:
Ext.onReady(function () {
var me = this;
me.store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96faffe5f7d6e5fffbe6e5f9f8e5b8f5f9fb">[email protected]</a>", "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()
});
While everything functions smoothly on Chrome with the window opening in about 1 second, Internet Explorer takes significantly longer, anywhere between 3-5 seconds.
Experimented by floating the grids right and left, which improved rendering on IE. However, this caused issues with auto-scroll functionality and clicking records resulted in grid shifting (~20px)
Any suggestions for optimizing performance on Internet Explorer without compromising functionality?
Using ExtJs 4.0.7.
PS: The delay is not due to loading grid stores as they are fetched via callback.