>我有一个窗口,我想在上面放置 4 个这样的网格
Grid1 Grid2
Grid3 Grid4
我希望网格在调整窗口大小时自动调整大小。
使用组合的 hbox/vbox 布局来做到这一点很简单,就像我在上面的示例中所做的那样:
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()
});
在 chrome 上一切正常(窗口在 1 秒内打开),但在 Internet Explorer 上,窗口呈现在 3-5 秒之间,这太多了。
我还尝试左右浮动这 4 个网格,它在 IE 上的渲染效果要好得多,但这样我就会失去网格上的自动滚动(除非我将每个网格放在合适的容器中...... 当我单击记录时,网格上升了若干像素(~20px)
关于如何在没有 3-5 秒渲染的情况下在 IE 上也能很好地工作的任何想法?
我正在使用 ExtJs 4.0.7。
PS:问题不在于网格存储的加载,它们在回调时出现。
您的嵌套肯定比您需要的多,这会显着减慢布局速度。尝试摆脱 2 个外部容器,使其看起来更像这样:
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()
您也可以考虑将窗口初始化为隐藏,然后根据需要显示/隐藏它,而不是每次都重新创建它。