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.

02. Anchor Layout

Los Layouts son las formas en la que un contenedor distribuye a los elementos que están contenidos en él. Puede hacerse una analogía con los layouts que utiliza java para distribuir sus componentes.

El Anchor Layout permite:

• Distribuir el ancho de los elementos en relación al ancho del contenedor utilizando un porcentaje o un número negativo.
• Distribuir la altura de los elementos en relación a la altura del contenedor utilizando un porcentaje o un número negativo.

Por ejemplo, veamos el siguiente código:

    <script type="text/javascript">
        Ext.onReady(function() {
            var viewport = new Ext.Viewport({
                layout:'anchor',
                items:[{
                    title:'Item 1',
                    html:'Uno',
                    anchor:'50% -20'
                }]
            });
        });
    </script>

Da el siguiente resultado:Vemos que si cambiamos el tamaño de la ventana, automáticamente se redimensionan los elementos. Otro ejemplo:

    <script type="text/javascript">
        Ext.onReady(function() {
            var viewport = new Ext.Viewport({
                layout:'anchor',
                items:[{
                    title:'Item 1',
                    html:'Uno',
                    anchor:'100% 30%'
                },{
                    title:'Item 2',
                    html:'Dos',
                    anchor:'-200 70%'
                }]
            });
        });
    </script>

Nos da el siguiente resultado:Podemos ver que:

• Hemos estatablecido el Layaout (distribución) del Viewport por medio de la propiedad 'layout', en este caso hemos puesto 'anchor'.
• Hemos establecido la propiedad 'anchor' de los elementos que están dentro del Viewport. Esta propiedad tiene dos valores: El primer valor indica un porcentaje respecto al ancho del contenedor o un valor negativo que indica cual es el margen derecho que debe mantenerse. El segundo valor indica un porcentaje respecto al alto del contenedor o un valor negativo que indica cual es el margen inferior que debe mantenerse.