PDA

View Full Version : Align in HBOX panel.



anpegar
23 Dec 2010, 3:28 AM
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:
23947

Without error, appears when i reload the web:
23948


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>

Condor
23 Dec 2010, 4:14 AM
The hbox layout can't determine the width of your images, because they haven't loaded yet.

You will need to specify a fixed 'width' on all your BoxComponents with images.

anpegar
23 Dec 2010, 4:29 AM
Yes, work fine !!
Condor, Thank you very much.