Scale entire draw container content - extjs

Question

See the fiddle for the test code: https://fiddle.sencha.com/#fiddle/1jro
or code below:
Ext.application({
name : 'Fiddle',
launch : function() {
var container = new Ext.draw.Container({
renderTo: Ext.getBody(),
width: 400,
height: 300
});
var surf = container.getSurface();
var s1 = surf.add({
type: 'rect',
x: 50, y: 10, width: 300, height: 80, radius: 50,
fillStyle: '#ff0000', strokeStyle: 'black'
});
var s2 = surf.add({
type: 'path', path: 'M 50, 110 l 100 80 l 100 -80 l 100 80',
fillStyle: '#00ff00', strokeStyle: 'black'
});
var s3 = surf.add({
type: 'rect',
x: 50, y: 210, width: 300, height: 80, radius: 50,
fillStyle: '#0000ff', strokeStyle: 'black'
});
container.renderFrame();
// Resize (halve x and y)
setTimeout(function() {
container.setSize(200, 150);
s1.setAttributes({scalingX: 0.5, scalingY: 0.5});
s2.setAttributes({scalingX: 0.5, scalingY: 0.5});
s3.setAttributes({scalingX: 0.5, scalingY: 0.5});
container.renderFrame();
}, 5000);
}
});
What I would like to do is to be able to scale the entire draw container with all sprites moved and scaled appropriately. When I halve the container, the whole image should just get smaller. Can this be done is some way? My current implementaion is wrong as only scaling is applied and the positions are invalid.

Answer 1

The answer is simple in the end. Just use scalingCenter(X and Y):
s1.setAttributes({scalingX: 0.5, scalingY: 0.5, scalingCenterX: 0, scalingCenterY: 0});
s2.setAttributes({scalingX: 0.5, scalingY: 0.5, scalingCenterX: 0, scalingCenterY: 0});
s3.setAttributes({scalingX: 0.5, scalingY: 0.5, scalingCenterX: 0, scalingCenterY: 0});