PDA

View Full Version : [3.0 RC3]Issue with HBox layout and Align Middle



robertoroberto
5 Jul 2009, 2:37 AM
Hi
I have an issue about align middle with a HBOX layout.
It seems that on FF Img is not aligned
With IE all works fine

get a look to screenshot

http://img189.imageshack.us/img189/8457/ffissue.th.jpg (http://img189.imageshack.us/i/ffissue.jpg/)

This is my code



<html dir="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all.js"></script>
<script>
function buildUserCompanyBox()
{
var vPanel = new Ext.Container(
{
width : '500',
border : false,
layout : 'form',
items : []
});
var vField1 = new Ext.form.DisplayField(
{
fieldLabel : "Field 1",
labelSeparator : '',
value : "AAA",
autoWidth : true,
autoHeight : true
});
vPanel.add(vField1);
var vField2 = new Ext.form.DisplayField(
{
fieldLabel : "Field 2",
labelSeparator : '',
value : "BBB",
autoWidth : true,
autoHeight : true
});
vPanel.add(vField2);
var vField3 = new Ext.form.DisplayField(
{
fieldLabel : "Field 3",
labelSeparator : '',
value : "CCC",
autoWidth : true,
autoHeight : true
});
vPanel.add(vField3);
return vPanel;
}
Ext.onReady(function() {
var vCenterPanel = new Ext.Container(
{
region : 'center',
layout : 'fit',
margins : '2 5 5 0',
border : false,
items : []
});
var vWestPanel = new Ext.Container(
{
region : 'west',
layout : 'fit',
margins : '2 5 5 0',
border : false,
items : []
});
var vLogoutButton = new Ext.Button(
{
icon : 'UISTYLE_LOGOUT_ICON',
handler : function()
{
alert('logout');
}
});
var vImageBox = new Ext.BoxComponent(
{
autoEl :
{
html : '<img src="http://img21.imageshack.us/img21/8332/logokve.jpg">' (http://img21.imageshack.us/img21/8332/logokve.jpg&quot;>')
}
});
var vSpacer = new Ext.Spacer(
{
flex : 1
});
var vNorthRegion = new Ext.Panel(
{
autoHeight : true,
border : false,
region : 'north',
layout : 'hbox',
layoutConfig :
{
align : 'middle'
},
items :
[vImageBox, vSpacer, buildUserCompanyBox(), vLogoutButton]
});
var vView = new Ext.Viewport(
{
layout : 'border',
items :
[vNorthRegion, vWestPanel, vCenterPanel]
});
vView.doLayout();
})
</script>
</head>
<body>
</body>
</html>



I believe it is a bug... but I'm not sure....

evant
5 Jul 2009, 4:59 PM
Give the image a height:



var vImageBox = new Ext.BoxComponent({
height: 50,
autoEl: {
html: '<img src="http://img21.imageshack.us/img21/8332/logokve.jpg">'
}
});

robertoroberto
5 Jul 2009, 10:39 PM
Hi and Ty Evant,

but it doesn't works.
have you try it ?
with FF 3.0.11 image is not center vertically. With IE it works

Anyway I have also some problem adding it because image is defined at the server side (and each one can use own image...): but this point can be fixed maybe forcing users to use as logo an image with a fixed height or using a customizable css class.

Any other idea ?

thank

evant
5 Jul 2009, 11:04 PM
Yes, I tested it using FF3.0.11 and it works fine. Make sure you're using RC3.

robertoroberto
6 Jul 2009, 12:43 AM
I'm sorry Evan
I make a mistake.
it is working

I put the height into the autoEl instead that outside.
I'm sorry

Thanks