04. Column Layout

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.