Llega un momento en el que las aplicaciones requieren de una interfaz gráfica compleja y dinámica.
ExtJS facilita la creación de estas interfaces gráficas.
Primero hay que pensar en una interfaz gráfica compleja: Muchos contenedores (paneles), formularios, gráficos, grillas, menúes, cajas de texto, etc.
¿Por donde empezar?
Anteriormente había indicado que los paneles son la base de construcción de la interfaz gráfica. Pero esos paneles deben ubicarse de forma coherente para que el usuario pueda usar la aplicación lo más eficientemente posible. Para ello, se utilizan dos clases: «Viewport» y algún «Layout».
Una instancia de «Viewport» representa el área visible de la aplicación. Se le configura un «Layout» para indicar como debe comportarse y como debe ser la disposición de elementos dentro del mismo. Esto constituye la primer base coherente para construir una gran interfaz gráfica, es la raíz de toda la GUI y todo lo que se construya gráficamente irá dentro del «Viewport».
La disposición de los elementos a mostrar depende de un «Layout» (diseño). Hay varios tipos de «Layouts», pero me concentraré en el Border Layout.
El Border Layout da a un contenedor (no sólo al «Viewport», sino también a otros contenedores, como los paneles) la posibilidad de ordenar elementos en cinco regiones y según los puntos cardinales: Norte, sur, este y oeste, además una región central. Cuando se utiliza un layout de tipo «border», entonces, uno de sus ítems (o el único cuando así sea) siempre debe indicar en un atributo llamado oportunamente «region» que su región es la central («center»). Si no se indica a un elemento como región central, la construcción del contenedor devolverá un error y se detendrá la ejecución del script.
Los otros cuatro puntos cardinales son opcionales, pudiendo utilizar sólo aquellos que se requiera según la situación de la aplicación.
Una de las grandes ventajas de utilizar un «Viewport» junto con un «Layout» tipo «border» es el ajuste automático en caso de redimensión, es decir, si el usuario cambia el tamaño de la ventana, el «Vireport» se ajustará al nuevo tamaño automáticamente, y sus componentes internos, o childs (hijos) lo harán también y mantendrán un aspecto coherente dentro de lo razonable.
Algo muy valorado de este mecanismo es la capacidad de cambiar dinámicamente el tamaño de una región. Por defecto se ofrece un tamaño de región predeterminado, pero el usuario tiene a disposición la posibilidad de hacer más grande, o más pequeña, incluso ocultar, una región en particular (o todas) si así lo quiere.
Hay más opciones, pero las mencionadas son las más comunes. Entonces, ¿cómo construir un Viewport con un border layout?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | Ext.onReady(function(){ Ext.create('Ext.Viewport', { layout: { type: 'border' }, defaults: { split: true }, items: [{ region: 'north', collapsible: true, title: 'Norte', split: true, height: 100, html: 'Norte' },{ region: 'west', collapsible: true, title: 'Oeste Ancho al 30%', split: true, width: '30%', html: 'Oeste' },{ title: 'Centro', region: 'center', border: false, html: 'Cento' },{ region: 'east', collapsible: true, floatable: true, split: true, width: 200, title: 'Este', html: 'Este' },{ region: 'south', collapsible: true, split: true, height: 200, title: 'Sur', html: 'Sur' }] }); }); |
El resultado sería como este:
Examinando el Código
Lo primero es crear una instancia de «Viewport». Esta instancia prepara el área del navegador como área visible de la aplicación. A la instancia se le definen tres cosas: Un objeto «layout», un objeto «defaults» y un arreglo de «items».
A el objeto «layout» únicamente se le define el tipo: «border». Esto es lo que permite que los elementos del «Viewport» se ordenen en regiones.
El objeto «defaults» es para definir propiedad por defecto para todos los elementos del «Viewport». En este caso una sola propiedad: «split», con valor verdadero. Esto es lo que permite redimensionar cada región por medio de los bordes divisorios.
Finalmente, se define un arreglo de «items», cada uno es la definición de un objeto que implícitamente es un «Panel», y por tanto puede ser cualquier instancia de cualquier clase que herede de «Panel», como formularios y grillas.
Hasta aquí por el momento, pero podéis dar un vistazo a las entradas anteriores:
Saludos
