Construyendo una interfaz con Layout Border de Sencha ExtJS

Construir  interfaces es una de las grandes ventajas de Sencha Extjs, pues este framework nos da una herramienta muy funcional como es los layouts, los cuales se usan para poder alinear o posicionar los elementos de interfaz de usuario en lugares predefinidos dentro de la ventana de Usuario.

Layout Border Sencha ExtJS

Basicamente lo que podemos lograr con el uso del layout border es tener a nuestra disposicion 5 posiciones para colocar los elementos a usar en nuestra interfaz, en el caso del ejemplo usaremos panels, pero en un caso general se puede usar para multipes fines. Sencha Extjs posee muchos otros layouts para muchos otros fines, y si se desea profundizar en el conocimiento de los mismos se debe acceder a la documentacion del framework Sencha Extjs.

El layout border tiene 5 espacios donde se pueden ubicar los elementos de interfaz grafica de Sencha Extjs, dentro de los cuales se puede hacer uso de:

  • North: ubicacion norte, (en este caso se debe detallar la altura del elemento a dibujar)
  • South: ubicacion sur,(en este caso se debe detallar la altura del elemento a dibujar)
  • East: ubicacion este,(en este caso se debe detallar la anchura del elemento a dibujar)
  • West: ubicacion oeste,(en este caso se debe detallar la anchura del elemento a dibujar)
  • Center: ubicacion central.(en este caso no es necesario detallar altura o anchura pues es calculado automaticamente)

Para implementar una disposicion de layout border en el elemento padre contenedor se debe escribir lo siguiente:
layout: {
    type: ‘border’
},
Seguidamente en cada uno de los subelementos les indicamos la posicion donde seran colocados, de esta manera:
xtype: ‘panel’,
region: ‘north’,
height: 128,
De esta forma logramos por ejemplo que el elemento indicado como panel tome la posicion norte del contenedor y a su vez le indicamos la altura que se le asignara al elemento.

Ejemplo grafico:

Aplicacion ejemplo layout border

Aplicacion ejemplo layout border

Para ver un codigo completo de este tipo de layout veanlo en el siguiente link.

Codigo: https://bitbucket.org/xhrist14n/linea.codigo/src/fa3246dd1a94/samples.javascript/3?at=master

Escrito por : Christian Portilla Pauca

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s