Objeto Ext.Viewport.

Este objeto es un contenedor especial dentro del core de Ext Js (muy parecido a Ext.Panel), el cual representa el area visible de la aplicación.
Su jerarquia de clases es:


Decimos que es especial porque:

• Automáticamente se renderiza en el cuerpo del documento html (document.body).
• Se ajusta al tamaño de la ventana según esta sea redimensionada. (Probar cambiando el tamaño de la ventana en el demo).
• Solo puede haber un objeto Ext.Viewport por página.
• No soporta desplazamiento (scrolling), si se necesita, este debe ser implementado por los componentes hijos, como por ejemplo un Ext.Panel.
  

Bueno ya basta!, dame algo que ver, muéstrame algo de código...
Ejemplo:

Code snippet - Ext.Viewport on Snipplr

Explicando un poco:

Ext.onReady( ); Esta función que se ejecuta cuando DOM esta listo y puede ser referenciado, es como el evento onLoad del body, pero la diferencia es que onReady no espera que carguen las imágenes, estilos, JavaScript y el DOM, por lo tanto esta listo antes que el evento onLoad. (Dar un vistazo al API de Ext JS.)

Todos los objetos tienen algo llamado "Opciones de Configuración", que vienen a ser las opciones iniciales de cada objeto, y aca items es precisamente una de las opciones de Ext.Viewport. Algunas otras opciones son:

• anchor: Esta opción debe ser usada cuando el contenedor ha sido configurado con un administrador de contenidos AnchorLayout.
• disabled: Habilita o deshabilita el componente, su valor por default es falso.
• hidden: Esta propiedad configura al objeto para saber si debe ser mostrado o no.
• hideBorders: Indica si debe o no debe ser pintados los borders, su valor por default falso
• layout: Indica el tamaño y la posición que tomaran los objetos dentro del contenedor.
• items: Puede ser un objeto o un arreglo de objetos. Esta es una de las vías por la cual podemos agregar componentes hijos dentro de otro objeto, en este caso el contenedor Ext.Viewport.

Ejemplo;

• un solo objeto: items:{...}
• varios objetos: items_[{...}, {...}]
  

Estos objetos (items) pueden ser cualquier objeto basado en la clase Ext.Component los cuales podemos encontrarlos expresados de dos formas:

• Un instancia completa:
  

Code snippet - TextField on Snipplr

quedando: items:{nombre}

• Un literal objeto (object literal, objeto dinámico) que contiene un conjunto de propiedades y valores, que:

1.- Tiene especificado el tipo de objeto mediante xtype, el cual debe ser alguno de las lista que se encuentra dentro de Ext.Component.
2.- Si no es especificado un xtype, el valor de defaultType del contenedor(Conteiner) será usado, siendo este 'panel'.
quedando:

Code snippet - items on Snipplr

El resultado es el siguiente:


Ver demo: Viewport
Se que parece una cosilla de nada, pero espero seguir avanzando, para ver ejemplos más útiles.

Conclusión:

Bueno pues como ya vimos crear un objeto Ext.Viewport, es algo muy sencillo ya que todos tenemos las bases sobre los conceptos de la programación orientada a objetos, y como bien dije al principio es muy parecida la programación en Java, (recuerdo cuando le cambie el color a mi primer panel.... ;-) ), además de que la forma en que se agregan los objetos es muy clara, gracias a JSON, que espero poder explicar un poco sobre esta notación.

Links:
API Ext JS
Material de apoyo.