Paquetes con Sencha Cmd

Los paquetes en Sencha, son la mejor forma de compartir código JavaScript entre varias aplicaciones con diferentes tecnologías(Extjs y Sencha Touch).En este articulo veremos como aprovechar esta funcionalidad junto a nuestras aplicaciones Ext JS.

Preparando el escenario

La mejor forma de trabajar con Sencha Cmd y la generación de aplicaciones es atraves de los espacios de trabajo "Workspace", un espacio de trabajo no es mas que un directorio determinado dentro de nuestra PC, donde podemos encontrar elementos comunes tales como: aplicaciones,paquetes y el frameworks de ExtJs, esta no es la única forma de trabajar con Sencha Cmd, pero de lejos es la mejor para poder tener todo centralizado en un solo lugar.

Para este artículo, vamos a crear un espacio de trabajo de prueba en una carpeta vacía:

D:\extjs> sencha generate workspace .
Sencha Cmd v5.0.1.231
...

Ahora vamos a crear dos aplicaciones en nuestro nuevo espacio de trabajo,para ello nos dirigimos, en la consola de comando ejecutamos :

D:\extjs> sencha -sdk D:\Instaladores\ext-4.2.2-gpl\ext-4.2.2.1144 generate app ExtApp1 extApps/app1
Sencha Cmd v5.0.1.231
...

D:\extjs> sencha -sdk ext generate app ExtApp2 extApps/app2
Sencha Cmd v5.0.1.231
...

Podemos observar en el primer comando se puso la dirección absoluta del SDK de ExtJs, el cual no esta en nuestro "Workspace", esta instrucción crea nuestra aplicación y hace una copia local del SDK en nuestro worksape, es por esto que en el segundo comando se apunta a este para crear la segunda aplicación.

Ahora, tenemos un área de trabajo, un subconjunto de Ext JS y dos aplicaciones vacías en una estructura de carpetas que se ve así:

extjs/
    ext/             (Una copia con los archivos necesarios de Ext JS)
        packages/    (Paquetes proporcionados por Ext JS)
    extApps/
        app1/
        app2/
    packages/        (Carpeta para paquetes que no son del framework)

Vamos a Generar un paquete

Los paquetes pueden ser generados de forma similar a las aplicaciones, así:

D:\extjs> sencha generate package common
Sencha Cmd v5.0.1.231
...

La diferencia clave es que el nuevo paquete se coloca en la carpeta de "packages":

extjs/
    ...
    packages/
        common/
            resources/
            sass/
            src/
            package.json
            ...

ahora crearemos un archivo que sobrescriba la clase "Ext.form.field.Text", la dirección del archivo sera la siguiente:

el contenido de este archivo sera el siguiente :

Ahora vamos a utilizar el paquete en el proyecto app1, para ello en el archivo "app.json" en la seccion requires ponemos lo siguiente:

con esto nos estamos asegurando que nuestra aplicación cargara el contenido de este maquete, el sobrescribe la clase "Ext.form.field.Text".

Ahora actualizamos nuestra aplicación :

luego la ejecutamos:

y el resultado sera el siguiente:

como ahora si quisiéramos utilizar este mismo componente en la aplicación "app2", bastaría con modificar su respectivo archivo "app.json" incluyendo el paquete "common" y listo.

esta es una de las principales funcionalidades de trabajar con espacios de trabajo y paquetes.

eso es todo amigos espero que el articulo se de utilidad.