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.