PDA

View Full Version : [CLOSED] Viewport margin issue



siegfriedk
5 Aug 2011, 5:07 AM
Ext version tested:

Ext 4.02a

Browser versions tested against:

FF5 (firebug 1.8.0installed)

Description:

Right and bottom margins doesn´t render with only center region.

Steps to reproduce the problem:



Ext.define('Money.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'center',
margin: '5 5 5 5',
items: {
title: 'Default Tab'
}
}]
});


The result that was expected:

A Viewport with a 5px margin

The result that occurs instead:


A Viewport with a 5px margin only at the top and left.

Animal
5 Aug 2011, 5:38 AM
There's no margins config for some layouts.

siegfriedk
5 Aug 2011, 5:40 AM
I googled for this issue and found a thread saying the two config "margin" and "margins" were acceptable.
In the docs, it says "margin".

But thats another problem, if you try it with margins, you got no margin at all.

Animal
5 Aug 2011, 5:43 AM
Hmf... bordar is one of the ones that should honour that! Bug!

Animal
5 Aug 2011, 5:44 AM
A workaround is to configure the inner component with style: "margins: 5px 5px 5px 5px"...

But this is a bug, but all test cases use margins, so how could it have been released?

Animal
5 Aug 2011, 5:47 AM
OK, I got it.

If you only specify one region, 'center', then you really mean fit.

So it uses fit.

And fit layout does not have a margins config.

So maybe it should. I'll have to consult with the team on this.

siegfriedk
5 Aug 2011, 5:50 AM
Ok, thanks!

siegfriedk
5 Aug 2011, 6:04 AM
Another workaraound:


Ext.define('Money.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'center',
title: 'Default Tab',
margins: '5 5 5 5'
},{
region: 'west'
}]
});

Animal
5 Aug 2011, 6:09 AM
Yes, if you use border layout for what it's intended to be used for, then it will in fact use box layout, and that honours margins.

In fact you are using an hbox layout there... There's no such layout as 'border'.

siegfriedk
5 Aug 2011, 6:24 AM
In fact you are using an hbox layout there... There's no such layout as 'border'.

That said, this is another possible solution:


Ext.define('Money.view.Viewport', {
extend: 'Ext.container.Viewport',
renderTo: Ext.getBody(),
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
title: 'Default Tab',
margins: '5 5 5 5',
flex: 1,
html: "TEST"
}]
});


Still have to add a CSS rule to have blue margins.