像这样的东西怎么样(在架构师中快速绘制):
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 600,
width: 1000,
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'My Window',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'fit'
},
items: [{
xtype: 'chart'
}]
}, {
xtype: 'container',
flex: 4,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [{
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}]
}, {
xtype: 'gridpanel',
flex: 1,
title: 'My Grid Panel',
}]
}]
});
me.callParent(arguments);
}
});
尽管这样,第二个容器的 Flex 值必须考虑到您水平显示的图表数量。