Esta distribución alinea los elementos de izquierda a derecha, y de arriba a abajo, pudiendo especificar el ancho de cada uno de los elementos, ya sea con la propiedad
'width', que es fijo, o
'columnWidth', que es un ancho relativo al contenedor. Se pueden combinar elementos con anchos fijos y relativos pero debe tenerse cuidado, porque si no se hace acuadamente puede dar resultados inesperados.
<style type="text/css">
.x-column-layout-ct .x-panel {margin-bottom:5px;}
</style>
<script type="text/javascript">
Ext.onReady(function(){
var viewport = new Ext.Viewport(
{
layout:'column',
items:[{
columnWidth:.33,
baseCls:'x-plain',
bodyStyle:'padding:5px 0px 5px 5px',
items:[{
title:'Panel 1',
html:'Cuerpo 1'
}]
},{
columnWidth:.33,
baseCls:'x-plain',
bodyStyle:'padding:5px 0px 5px 5px',
items:[{
title:'Panel 2',
html:'Cuerpo 2'
}]
},{
columnWidth:.34,
baseCls:'x-plain',
bodyStyle:'padding:5px',
items:[{
title:'Panel 3.1',
html:'Cuerpo 3.1'
},{
title:'Panel 3.2',
html:'Cuerpo 3.2'
}]
}]
})
});
</script>
Al ejecutar la página, se ve así:
- Hay que tener en cuenta que para que el diseño salga bien, debemos establecer algunos márgenes de separación utilizando estilos, por eso se utiliza una hoja de estilos para establecerlos.
- Es recomendable utilizar un contenedor dentro de otro contenedor antes de aplicarlo a la columnas, de esta forma podremos separar las columnas utilizando estilos.
- La propiedad baseCls nos permite dar un estilo sin bordes a los contenedores de los paneles.
