Align in HBOX panel.

[anpegar]

Hi folk, i have the following case:

When i load my web page the components of north zone are shown piled up but when i execute reload (F5) of web page the components are shown ok, Why? any idea?

With error, appears when i access the first time:
withError.png

Without error, appears when i reload the web:
withoutError.png


part of my code:

<script>
Ext.onReady(function(){
 var newError = new Ext.ux.MenuItem({
      id: 'newError',        
      text: 'Nuevo Error',
        handler: datNewError
  });               
 
  var newCons = new Ext.ux.MenuItem({
      id: 'newCons',        
      text: 'Nueva Consulta',
        handler: datNewCons
  });               
 
  var newDes = new Ext.ux.MenuItem({
      id: 'newDes',        
      text: 'Nuevo Desarrollo',
        handler: datNewDes
  });               
 
  var consTareas = new Ext.ux.MenuItem({
      id: 'consTareas',        
      text: 'Consulta de Incidencias',
        handler: datConsTareas
  });               
 
  var infTareas = new Ext.ux.MenuItem({
      id: 'infTareas',        
      text: 'Informe de Incidencias',
        handler: datInfTareas
  });               
 
  var menuTarea = new Ext.ux.Menu({
      id: 'menuTarea',        
      items: [newError,newCons,newDes,'-',consTareas,infTareas]
  });               
 
    var btnTarea = new Ext.ux.Button({
            id: 'btnTarea',
            text: 'Incidencias',
              icon: '/productos_v2/web/fima/apl_sopor/tarea.png',
              cls: 'x-btn-text-icon',
              menu: menuTarea        
    });
 
    var btnAyudaERP = new Ext.ux.Button({
            id: 'btnAyudaERP',
            cls: 'x-btn-text',
              text: 'Ayudas Expert ERP',
              handler: datAyudasExpert        
    });
 
    var btnPaqueteConsultas = new Ext.ux.Button({
            id: 'btnPaqueteConsultas',
            hidden: false,
              cls: 'x-btn-text',
              text: 'Contratar Paquete de Consultas',
              handler: datContratarPaquete        
    });
 
    var btnEvalPdtes = new Ext.ux.Button({
            id: 'btnEvalPdtes',
            hidden: true,
              tooltip: 'Hay evaluaciones pendientes de realizar.',
              tooltipType: 'title',
              icon: '/productos_v2/web/fima/apl_sopor/exclamation.png',
              cls: 'x-btn-text-icon',
              handler: datOpenEval        
    });
 
    var imgLogoData = new Ext.ux.BoxComponent({
        id: 'imgLogoData',        
        autoEl: {tag:'img',src:'/productos_v2/web/fima/apl_sopor/logo_datadec.png'},
            margins: '0 2 0 2',
            style: {cursor:'pointer'},
            listeners: {render: function(c){ c.getEl().on('click', function(e){window.open('http://www.datadec.es','_blank');});}}
    });               
 
    var imgLogoDdol = new Ext.ux.BoxComponent({
        id: 'imgLogoDdol',        
        autoEl: {tag:'img',src:'/productos_v2/web/fima/apl_sopor/logo_ddol.png'},
            margins: '0 2 0 2',
            style: {cursor:'pointer'},
            listeners: {render: function(c){ c.getEl().on('click', function(e){window.open('http://www.ddol.es','_blank');});}}
    });               
 
    var mySpacer1 = new Ext.ux.Spacer({
        id: 'mySpacer1',        
        width: 100
    });               
 
    var titulo = new Ext.ux.BoxComponent({
        id: 'titulo',        
        html: '<span class="textoTitPortalClte" >Bienvenido JESUS GOMEZ, S.L.<br></span><span class="textoTitPortalClteP" >usuario conectado: Jesús Gómez S.L. </span>'
    });               
 
    var mySpacer2 = new Ext.ux.Spacer({
        id: 'mySpacer2',        
        flex: 1
    });               
 
    var imgContacto = new Ext.ux.BoxComponent({
        id: 'imgContacto',        
        tooltip: '(SOLICITAR_INF_COMERCIAL)',
            autoEl: {tag:'img',src:'/productos_v2/web/fima/apl_sopor/contacto.png'},
            margins: '0 2 0 2',
            style: {cursor:'pointer'},
            listeners: {render: function(c){ c.getEl().on('click', function(e){solicitudInfo('jgomez');});}}
    });               
 
    var toolbarTareas = new Ext.ux.Toolbar({
        id: 'toolbarTareas',        
        height: 30,
            items: [btnTarea,'-',btnAyudaERP,btnPaqueteConsultas,'->',btnEvalPdtes]
    });        
 
    var solicitudInfo = function (pUsr){
 
           var newX  = document.body.scrollLeft + document.body.clientWidth/2 - 620/2;
           var newY  = document.body.scrollTop + document.body.clientHeight/2 - 268/2;
           winInfo.setPosition(newX,newY);
           winInfo.show();
 
    };                    
 
    var bSugerencias = function (pUsr){
 
           var newX  = document.body.scrollLeft + document.body.clientWidth/2 - 620/2;
           var newY  = document.body.scrollTop + document.body.clientHeight/2 - 320/2;
 
           winSuge.setPosition(newX,newY);
           winSuge.show();
 
    };                    
 
    var zonaNorte = new Ext.ux.Panel({
        id: 'zonaNorte',        
        layout: 'hbox',
            layoutConfig: {align:'middle'},
            autoScroll: false,
            border: false,
            boxMinHeight: 77,
            bodyStyle: 'background-color:#D1DFF0',
            bbar: toolbarTareas,
            items: [imgLogoData,imgLogoDdol,mySpacer1,titulo,mySpacer2,imgContacto]
    });     
    var vpHome = new Ext.ux.Viewport({
      id: 'vpHome',        
      layout: 'border',
      autoScroll: true,
      renderTo: Ext.getBody(),
      items: [zNorte,zCentro,zEste]
    });             
 
    zonaNorte.syncSize();    
    zonaNorte.syncSize();
 }); //end onReady
</script>