Gana hasta un 30% más con tu trabajo, obtén el control de tu carrera y lleva una vida más feliz, placentera y saludable.
Mario Raúl Pérez, Servicios de Capacitación Profesional.

Primeros Pasos con ExtJS

1. Requisitos

1.1 Navegadores Web

Ext JS 4 es compatible con casi todos los navegadores conocidos, desde Internet Explorer 6 a la última versión de Google Chrome. Durante el desarrollo, sin embargo, le recomendamos que elija uno de los siguientes navegadores para obtener una mejor experiencia de depuración:

  • Google Chrome 10+
  • Apple Safari 5+
  • Mozilla Firefox 4+ con el Plugin de desarrollo web Firebug

En este tutorial se asume que está utilizando la última versión de Google Chrome. Si aún no dispone de Chrome, tómese un momento para instalarlo, y familiarizarse con las herramientas de desarrollo que incluye.

1.2 servidor Web

A pesar de que un servidor web local no es un requisito de utilización de Ext JS 4, sin embargo es muy recomendable que se desarrolle con uno, ya que las peticiones de XHR sobre el protocolo local file: / / tienen una restricción de origen de dominio (cross domain) en la mayoría de los navegadores. Si usted no tiene un servidor web local, se recomienda que descargue e instale Apache HTTP Server.

  • Mac OS X viene con una instalación incluida de apache que se puede activar mediante la navegación a “Preferencias del Sistema> Compartir” y marcando la casilla junto a “Compartir Web”.

Una vez que haya instalado o activado Apache se puede verificar que se está ejecutando, vaya hasta localhost en el navegador. Usted debe ver una página inicial que indica que Apache HTTP Server se ha instalado correctamente y está en marcha.

1.3 Ext JS SDK 4

Descargar Ext JS 4 SDK. Descomprimir el paquete a un nuevo directorio llamado “ExtJS” dentro de su directorio web raíz. Si no está seguro de cual es su directorio web raíz , consulte la documentación de su servidor web. El directorio raíz web puede variar dependiendo de su sistema operativo, pero si usted está usando Apache que normalmente se encuentra en:

  • Windows – “C:\Program Files\Apache Software Foundation\Apache2.2\htdocs”
  • Linux – “/var/www/”
  • Mac OS X – “/Library/WebServer/Documents/”

Una vez que haya finalizado la instalación de Apache vaya a http://localhost/extjs/index.html en su navegador. Si ve una página de bienvenida de Ext JS 4 , significa que está todo listo.

2. Estructura de la aplicación

2.1 Estructura básica

Aunque no es obligatorio, todas las sugerencias que figuran a continuación deben considerarse como directrices de mejores prácticas para que la aplicación bien organizada, extensible y mantenible. La siguiente es la estructura de directorios recomendados para una aplicación Ext JS:

- appname
    - app
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - extjs
    - resources
        - css
        - images
        - ...
    - app.js
    - index.html

Donde:

  • appname es un directorio que contiene todos los archivos de código fuente de su aplicación
  • app contiene todas las clases, el estilo de nombres debe seguir la convención que figuran en la guía del Sistema de clases de Ext JS
  • extjs contiene los archivos SDK de Ext JS 4
  • resources contiene archivos adicionales CSS y las imagenes que son responsables de la apariencia de la aplicación, así como otros recursos estáticos (XML, JSON, etc)
  • index.html es el documento punto de entrada de HTML
  • app.js contiene la lógica de su aplicación

No se preocupe por la creación de todos esos directorios en el momento. Por ahora simplemente nos permitiremos enfocarnos en la creación de la mínima cantidad de código necesario para conseguir una aplicación Ext JS en marcha y funcionando. Para ello vamos a crear un basico “hola mundo” en Ext JS llamado “Hola Ext”. En primer lugar, cree el directorio y los archivos en el directorio raíz web.

- helloext
    - app.js
    - index.html

Luego descomprima el Ext JS 4 en un directorio denominado extjs en el directorio helloext

Una típica aplicación en Ext JS que está contenida en un único documento HTML – index.html. Abra index.html e introduzca el siguiente código html:

Donde:

  • extjs/resources/css/ext all.css contiene toda la información necesaria para un estilo de todo el framework
  • extjs/ext-debug.js contiene un conjunto mínimo de cuatro clases principales de la biblioteca Ext JS
  • app.js contendrá el código de aplicación

Ahora ya estás listo para escribir el código de aplicación. abrir e insertar en App.js el siguiente código JavaScript:

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

Ahora abra su navegador y vaya a http://localhost/helloext/index.html. Usted debe ver un panel con una barra de título contiene el texto “Hola Ext” y el mensaje “bienvenida” en el área del cuerpo del panel.

2.2 Carga Dinámica

Abrir las herramientas de desarrollo Chrome y haga clic en la opción de la consola. Ahora recargar la aplicación Hola Ext. Usted debe ver una advertencia en la consola que se parece a esto:

Ext JS 4 viene con un sistema para la carga dinámica sólo de los recursos necesarios para ejecutar JavaScript de su aplicación. En nuestro ejemplo Ext.create , crea una instancia de Ext.container.Viewport. Cuando Ext.create es llamado el cargador primero verificará para ver si Ext.container.Viewport se ha definido. Si no esta definida el cargador intentará cargar el archivo JavaScript que contiene el código para Ext.container.Viewport antes de instanciar el objeto viewport.

En nuestro ejemplo, el archivo Viewport.js se carga con éxito, pero el cargador detecta que los archivos que se cargan de una manera menos que óptima. Como nos va a cargar el archivo Viewport.js sólo cuando una instancia de Ext.container.Viewport se solicita, la ejecución del código se detiene hasta que el archivo se ha cargado completamente, provocando un pequeño retraso. Este retraso se agrava si tenemos varias llamadas a Ext.create, porque la aplicación podría esperar a que cada archivo a cargar antes de solicitar la siguiente.

Para solucionar esto, podemos añadir esta línea de código antes de la llamada a Ext.application:

Ext.require (‘Ext.container.Viewport’);

Esto asegurará que el archivo que contiene el código para Ext.container.Viewport se carga antes que se ejecute la aplicación. Usted debe dejar de ver la advertencia de Ext.Loader al actualizar la página.

2.3 Métodos de inclusión la Biblioteca

Al descomprimir el Ext JS , verá los siguientes archivos:

  1. ext-debug.js – Este archivo es sólo para su uso durante el desarrollo. Se proporciona un número mínimo de clases de Ext JS necesarias para empezar a trabajar. Las clases adicionales deben ser cargados dinámicamente como archivos separados, como se demostró anteriormente.
  2. ext.js – lo mismo que ext-debug.js pero miniaturizada para su uso en la producción. Destinada a ser utilizada en combinación con el archivo app-all.js de su aplicación. (ver sección 3)
  3. ext-all-debug.js – Este archivo contiene toda el codigo de la biblioteca Ext JS. Esto puede ser útil para acortar su curva de aprendizaje inicial, ext-debug.js es preferible en la mayoría de los casos en que se este etapa de desarrollo de la aplicacion.
  4. ext-all.js – Esta es una versión miniaturizada de ext-all-debug.js que puede ser utilizado en entornos de producción, sin embargo, no es recomendable ya que la mayoría de las aplicaciones no hará uso de todas las clases que contiene. En su lugar, se recomienda que crear una versión personalizada para su entorno de producción como se describe en la sección 3.

3. Despliegue

El recientemente introducido Sencha SDK Tools (descargar aquí) hace que la implementación de cualquier aplicación Ext JS 4 más fácil que nunca. Las herramientas le permiten generar un manifiesto de todas las dependencias de JavaScript en un archivo JSB3 (formato de archivo JSBuilder) , y crear una compilación personalizada que contiene sólo el código que necesita la aplicación.

Una vez que hayas instalado las herramientas de SDK, abra una ventana de terminal y desplácese al directorio de la aplicación.

cd path/to/web/root/helloext

A partir de aquí sólo tienes que hacer un par de órdenes sencillas. El primero genera un archivo de JSB3:

sencha create jsb -a index.html -p app.jsb3

Para las aplicaciones basadas sobre un lenguaje dinámico del lado del servidor como PHP, Ruby, ASP, etc, puede simplemente reemplazar index.html con la URL real de su aplicación:

sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3

El sistema busca el archivo index.html para todos los archivos de aplicación y del framework que sean realmente utilizadas por la aplicación, y luego crea un archivo JSB llamado app.jsb3. Generando el JSB3 primero nos da la oportunidad de modificar el app.jsb3 generado antes de compilar – esto puede ser útil si tiene recursos personalizados para copiar, pero en la mayoría de los casos, inmediatamente se puede proceder a construir la aplicación con el segundo comando:

sencha build -p app.jsb3 -d .

Esto crea dos archivos basándose en el archivo JSB3:

  1. all-classes.js– Este archivo contiene todas las clases de la aplicación. No es miniaturizada así que es muy útil para depurar problemas con su aplicación compilada. En nuestro ejemplo, este archivo está vacío, porque nuestro “Hola Ext” la aplicación no contiene ninguna clase.
  2. app-all.js – Este archivo es un minimizado de la compilación de su aplicación, más todas las clases de Ext JS necesario para ejecutarlo. Es la versión miniaturizada y listos para la producción de all- classes.js-+ app.js.

Una aplicación Ext JS necesitará un index.html por separado para la versión de producción de la aplicación. Por lo general, se encargará de esto en su proceso de construcción o de la lógica del lado del servidor, pero por ahora vamos a crear un nuevo archivo en el directorio helloext llamado index-prod.html:

Tenga en cuenta que ext-debug.js ha sido sustituido por ext.js y app.js ha sido sustituido por app-all.js. Si navega a http://localhost/helloext/index-prod.html en su navegador, usted debe ver la versión de producción de la aplicación “Hola Ext”.

4. Continué leyendo:

El Sistema de Clases de ExtJS 4

5. referencias (en ingles):

  1. Class System
  2. MVC Application Architecture
  3. Layouts and Containsers
  4. Working with Data

ExtJS 4.0 Documentation from Sencha , versión en español por Mario Pérez.