03. Border Layout

Este Layout nos permite distribuir los elementos de un contenedor alineándolos a los bordes superior, inferior, izquierdo, derecho y al centro, de forma similar al layout de Java Swing.

    <script type="text/javascript">
        Ext.onReady(function() {
            var viewport = new Ext.Viewport({
                layout:'border',
                items:[
                    {
                    region:'west',
                    margins:'5 5 5 5',
                    cls:'empty',
                    bodyStyle:'background:#f1f1f1',
                    html:'Panel',
                    width:200,
                    title:'Mi Sector',
                    split:true
                },{
                    region:'center',
                    margins:'5 0 5 0',
                    cls:'empty',
                    bodyStyle:'background:#f1f1f1',
                    html:'Panel'
                },{
                    region:'east',
                    margins:'5 5 5 5',
                    cls:'empty',
                    bodyStyle:'background:#f1f1f1',
                    html:'Panel',
                    width:200
                }]
            });
        });
    </script>

En ese código:

• Se ha establecido el 'layout' a 'border'
• Los elementos que componen el contenedor tiene establecido la propiedad 'region', que puede tener los siguiente valores:
  • 'west': Oeste (izquierda)
  • 'east': Este (derecha)
  • 'south': Sur (abajo)
  • 'north': Norte (arriba)
  • 'center': Centro
• Se entiende que establecer un ancho o alto a un elemento ubicado en el centro no lo va afectar, pues se rige por la distribución del contenedor
• Los anchos o los altos son fijos para los que están alineados al oeste, este, sur o norte, cuando se cambia de tamaño a la ventana.
• Se ha utilizado la propiedad 'margin' en los elementos, para establecer los márgenes de arriba derecha abajo e izquierda respectivamente, para que no estén tan pegados.
• Se ha establecido la propiedad 'cls' para establecer la clase al cual pertenece el contenido de los elementos, esto es utilizado para establecer estilos.
• Se ha establecido la propiedad 'bodyStyle' para aplicar directamente un estilo al contenido de los elementos.
• Una propiedad interesante es 'split' que debe establecerse a true para permitir que el usuario pueda cambiar el tamaño del sector en tiempo de ejecución. Esta propiedad sólo hace efecto en los sectores que están en los bordes.

Este es el resultado del ejemplo:

• Otra propiedad interesante es 'collapsible' que permite colapsar un sector, debemos establecer su valor a true. Parece que es necesrio establecer también la propiedad 'title' del sector, porque allí es donde aparece el botón para colapsar. Así se vería la pantalla utilizando estra propiedad:

Lo que todavía no se, es, si se pueden establecer porcentajes envés de un ancho fijo.