PDA

View Full Version : Align items in layout HBOX



aperez
6 Aug 2010, 2:40 AM
Hi,

it's possible align independently the items of the hbox?
In the below image i want align the item "Titulo" in the middle of hbox and the images at the bottom of the hbox.

thank's

21821



Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '$VERSION_EXTJS$/resources/images/default/s.gif';

var img1 = new Ext.BoxComponent({
autoEl:{
tag: 'img'
,src: '/ima/apl_sopor/an_clte.gif'
,style: 'cursor:pointer'
//,onClick: 'prueba(e)'
}
,id: 'img1'
,style: 'border:1px solid #ff0000'
,margins: '2 2 2 2'
});
var prueba = function (){
alert('text');
}

/*var element = img1.getEl();
element.on('click', prueba.createDelegate(this));*/

var img2 = new Ext.BoxComponent({
autoEl:{
tag: 'img'
,src: '/ima/apl_sopor/ped_ent.gif'
}
,style: 'border:1px solid #ff0000'
,margins: '2 2 2 2'
});
var img3 = new Ext.BoxComponent({
autoEl:{
tag: 'img'
,src: '/ima/apl_sopor/facturacion_clientes.gif'
}
,style: 'border:1px solid #ff0000'
,margins: '2 2 2 2'
});
var img4 = new Ext.BoxComponent({
autoEl:{
tag: 'img'
,src: '/ima/apl_sopor/facturacion_clientes.gif'
}
,style: 'border:1px solid #ff0000'
,margins: '2 2 2 2'
});

var p1 = new Ext.Panel ({
html: 'Panel 1'
});
var p2 = new Ext.Panel ({
html: 'Panel 2'
});

<!-- ACORDEON -->
var acc = new Ext.Panel({
layout:'accordion'
,id: 'myAcc'
,border:false
,defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
}
,items:[{
title:'Acc 1'
,html: 'Contenido subpanel 1'
,border: true
},{
title:'Acc 2'
,html: 'Contenido subpanel 2'
,border: false
},{
title:'Acc 3'
,html: 'Contenido subpanel 3'
,border: false
}]
});

var sp = new Ext.Spacer({
flex: 1
});
var sp2 = new Ext.Spacer({
flex: 1
});
var titulo = new Ext.BoxComponent({
html: 'Bienvenido a Datadec, S.A.'
,style: 'border:1px solid #00ff00'
});
var v1 = new Ext.Viewport({
renderTo: Ext.getBody()
,layout: 'border'
,items: [{
region: 'north'
,height: 90
,items: [img1,img2,sp,titulo,sp2,img3]
,layout: {type:'hbox', align: 'center'}
},{
region: 'west'
,width: 90
,split: true
,html: 'test'
},{
region: 'center'
,id: 'rgCenter'
,layout: 'fit'
,items: [acc]
},{
region: 'east'
,width: 200
,split: true
,items: [p1,p2]
,layout: 'vbox'
,layoutConfig:{
align: 'stretch'
}
},{
region: 'south'
,xtype: 'panel'
,html: 'Panel South'
}]
});

}); //end onReady

Condor
6 Aug 2010, 2:45 AM
No you can't.

You would need to use a ToolbarLayout or nested VBox/HBoxLayouts.

aperez
6 Aug 2010, 2:49 AM
Condor, thank's for your answer.
Please, you can put an example of VBox/HBoxLayouts or ToolbarLayout?

Condor
6 Aug 2010, 3:06 AM
Forget my previous comment.

The easiest solution is to give the images a top margin (using the 'margins' config option) so they end up at the buttom.

aperez
6 Aug 2010, 3:17 AM
[SOLVED]

ok, is a good idea !! Work fine !!

var titulo = new Ext.BoxComponent({
html: 'Bienvenido a casa.'
,style: 'border:1px solid #00ff00'
,margins: '20 0 0 0'
});