Layouts y contenedores en Sencha ExtJS 6

Que son los layouts:

component_architecture

Los layouts son diseños o disposiciones de los elementos de interfaz de Sencha ExtJS y son muy utiles para diseñar interfaces que se vean bien en todo tipo de interfaz web que pueda funcionar asimismo en diferentes navegadores y otras tantas caracteristicas que simplifican el diseño de interfaces web.

Contenedores

Una aplicación de interfaz de usuario Ext JS está formado por componentes. Un contenedor es un tipo especial de componentes que pueden contener otros componentes. Una aplicación típica Ext JS se compone de varias capas de componentes anidados.

Usando Layouts

El uso de layouts nos permite manejar el diseño y posiciones de los elementos de interfaz, por tanto es importante que se deba crear interfaces guiadas en base a la creacion y posicionamiento de los elementos por medio de layouts. Cuando no tenemos un layout establecido las interfaces de usuario se disponen en base al layout auto el cual dispondra los elementos de forma seguida sin ningun parametro especial asumiendo que los elementos solo deben colocarse uno seguido del otro.

Como funciona el sistema del Layout

El rediseño de layout de un contenedor es responsable de la colocación inicial y dimensionamiento de todos los hijos de contenedor. Internamente el marco llama al método UpdateLayout de Container que desencadena el rediseño del layout para calcular los tamaños y las posiciones correctas para todos los hijos del contenedor y actualizar el DOM. El método UpdateLayout es totalmente recursivo, por lo que ninguno de los hijos de la Container tendrá su método UpdateLayout. Esto continúa hasta que se alcanza la parte inferior de la jerarquía de componentes. Por lo general, no tendrá que llamar cada vez UpdateLayout () en el código de aplicación ya que el marco debe manejarlo de modo automatico.

Layouts

dentro de los layouts existentes en el framework Sencha ExtJS podemos nombrar:

Absolute .- posicionamiento fijo.

Accordion.- posicionamiento en multiples panels.

Captura de pantalla de 2015-09-14 13:46:29

Anchor.- posicionamiento en porcentaje.

Captura de pantalla de 2015-09-14 13:46:38

Auto.- posicionamiento no establecido.

Border.- posicionamiento en bloques.

Captura de pantalla de 2015-09-14 13:46:41

Card.- posicionamiento modo asistente.

Captura de pantalla de 2015-09-14 13:46:44

Fit.- posicionamiento full pantalla.

Captura de pantalla de 2015-09-14 13:46:47

Hbox.- posicionamiento en modo horizontal.

Captura de pantalla de 2015-09-14 13:46:51

Table.- posicionamiento modo tabla.

Captura de pantalla de 2015-09-14 13:46:54

Vbox.- posicionamiento en modo vertical.

Captura de pantalla de 2015-09-14 13:50:48

Escrito por Christian Portilla Pauca

Link del Video

Website Traffic

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