Margins in a Fit-Layout don't work correctely in ExtJS 4.0.2a

[suamikim]

Hy there,

I'm working with ExtJS 4.0.2a and i can't change the version right now but am having a problem:


Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 500,
layout: "fit",
items: [{
xtype: 'panel',
id: 'testpanel',
title: 'the panel',
margin: '10'
}]
}).show();
});

Pretty simple code but the margins on the right & bottom don't appear correct as you can see on the screenshot:
37696

As soon as i use Version 4.1.0 of Ext the same code gives me a correct result:
37697

Does anybody know a workaround for this bug that i can use before i can upgrade the Ext-Version?

Thanks,

Mike

[Zdeno]

Try this.. i didnt test it on all cases but it works for your example well. It doesnt do anything else just remove margin from width and height for Fit layout.


Ext.override(Ext.layout.container.Fit ,{
setItemBox : function(item, box) {
var me = this;
var margin = parseInt(item.margin);


if (item && box.height > 0) {
if (!me.owner.isFixedWidth()) {
box.width = undefined;
} else {
box.width -= 2*margin;
}
if (!me.owner.isFixedHeight()) {
box.height = undefined;
} else {
box.height -= 2*margin;
}
me.setItemSize(item, box.width, box.height);
}
}
});

[suamikim]

Thanks for the workaround Zdeno. To be honest i haven't tested it because i found another solution that fits my needs.

Apart from the problem with the margins in a fit-layout not even working initialy (this thread) i was looking for a way to modify the margins dynamically after the layout has already been rendered (at runtime...).

With the solution to my second problem, the first one was also solved because i do use a anchor-layout instead of fit-layout. You can see the whole solution with dynamic margins in this post:
http://www.sencha.com/forum/showthread.php?219662-Change-padding-or-margin-at-runtime&p=866041&viewfull=1#post866041

Therefore a second possible workaround additionaly to the one Zdeno presented would be to just use a anchor-layout with anchor 100% and the margins set:

Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 500,
layout: "anchor",
items: [{
xtype: 'panel',
id: 'testpanel',
title: 'the panel',
margin: '10',
anchor: '100%, 100%'
}]
}).show();
});

Thanks