1. #1
    Ext User
    Join Date
    May 2009
    Location
    Italy
    Posts
    116
    Vote Rating
    0
    robertoroberto is on a distinguished road

      0  

    Default [3.0 RC3]Issue with HBox layout and Align Middle

    [3.0 RC3]Issue with HBox layout and Align Middle


    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....

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,066
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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">'
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    May 2009
    Location
    Italy
    Posts
    116
    Vote Rating
    0
    robertoroberto is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,066
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Yes, I tested it using FF3.0.11 and it works fine. Make sure you're using RC3.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext User
    Join Date
    May 2009
    Location
    Italy
    Posts
    116
    Vote Rating
    0
    robertoroberto is on a distinguished road

      0  

    Default


    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

Thread Participants: 1