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
    16,797
    Vote Rating
    602
    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
    16,797
    Vote Rating
    602
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi