[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

This is my code

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">'
            }
         });
   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:

Code:

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

[3.0 RC3]Issue with HBox layout and Align Middle

Thread Tools

Search Thread

Display

[3.0 RC3]Issue with HBox layout and Align Middle

[3.0 RC3]Issue with HBox layout and Align Middle