ExtJs-Sencha CMD. Conociendo la herramienta

Si habéis instalado CMD como os indicaba en el anterior articulo, supongo que estaréis impacientes por ver que otras herramientas disponemos. En este articulo veremos como podemos hacer trabajar a Sencha CMD para que nuestro trabajo se facilite.

Creando una aplicación con Sencha CMD

En el articulo anterior vimos algunos comandos que debemos lanzar desde la linea de comando. Para ello, lo primero que debemos crear es un directorio para guardar nuestro proyecto. En los ejemplos anteriores, utilizamos:

D:\ProyectosCursos\extjs\ejercicio1\

y sobre él, lanzamos el comando que nos generaba toda la estructura de la aplicación

D:\…ejercicio1> sencha generate app -ext MiApp1 mi-app

la estructura del comando sencha es:

sencha [category] [command] [options...] [arguments...]

y en nuestro ejemplo, hemos utilizado las categorías:

• generate – Para que genere módulos, o la estructura de  una aplicación entera
• app – Encargado de realizar distintos procesos, en este caso, generar la estructura de la aplicación

En argumentos, hemos utilizado «-ext» para indicarle que debe descargar el framework desde la web; la alternativa seria utilizar el argumento «-sdk» para indicar la ruta en donde se encuentra el framework en nuestra instalación. Esta opción la deberemos utilizar si ya tenemos descargado el framework por razones de optimización, o porque estamos utilizando la versión comercial de Sencha

Los dos últimos valores,corresponden al nombre de la aplicación, y a la ruta en la que deseamos guardarla, en el ejemplo, se creara en la posición actual una carpeta llamada «mi-app», y toda la estructura se dejara dentro.

Servidor web de Sencha CMD

Para arrancar el servidor web que viene incorporado en la descarga de Sencha CMD, solo debemos escribir en la linea de comando:

Pero hemos de tener en cuenta que este servidor utilizará como carpeta raíz, la carpeta desde la que lo hayamos arrancado. Teniendo en cuenta eso, podemos hacer lo que mas convenga, aunque lo habitual será arrancarlo desde la carpeta en la que esta nuestra aplicación; en nuestro caso «mi-app»

Este programa utiliza por defecto el puerto 1841, aunque podemos modificar dicho comportamiento por medio del parámetro «-port«. Si no lo modificamos, podremos acceder a la aplicación con un navegador, en la dirección;

http://localhost:1841

Cuando queramos detener el servidor, lo podemos hacer desde la ventana de comando desde que lo lanzamos, con un sencillo Ctrl+C, o, si no tenemos acceso a dicho proceso, utilizaremos el comando

>sencha web stop

Generando la aplicación

Aunque durante el desarrollo podemos acceder a la aplicación utilizando el navegador sin mas problemas, antes de entregar la aplicación para producción, o para test, es conveniente utilizar el compilador que incorpora Sencha CMD para que revise las dependencias y genere una estructura de carpetas, que es la que deberemos enviar a producción, en la carpeta «build», para ello debemos situarnos en el directorio inicial de nuestra aplicación, en nuestro ejemplo «mi-app» y ejecutar:

Automáticamente, se genera en la carpeta build dos carpetas, una con la configuración de desarrollo, y otra con la configuración de producción,

Precisamente, todo lo que tenemos que subir a producción, es lo que se encuentra en la carpeta

production/MiApp1

Extendiendo la aplicación

No todo se hace solo…. Aunque con una sola linea hemos creado una estructura, ahora la debemos llenar con controladores, modelos, formularios….respetando la estructura MVC que Sencha CMD nos ha creado.

Y también nos puede ayudar a crear el esqueleto de los ficheros, y ubicarlos en las carpetas correctas, y lo podemos hacer con el comando:

sencha generate ….

Para este uso, el comando lo deberemos lanzar siempre desde la carpeta raíz de la aplicación; en nuestro caso:

D:\ProyectosCursos\extjs\ejercicio1\mi-app

Generando modelos

Para añadir un modelo a la aplicación, utilizaremos:

Esto nos define un fichero en mi-app\app\model llamado «Usuario.js»  y que define una clase con los campos especificados:

Generando vistas

Si queremos añadir una vista, podemos hacer:

Con este comando,generaremos el esqueleto de la vista «listado» que será utilizada por «usuarios», en la siguiente estructura de fichero.

En caso de que la vista no tenga que extender «Ext.panel.Panel», podemos indicarlo con:

sencha generate view -base Ext.tab.Panel usuarios.listado

Generando controladores.

Como que en cada vista, hemos generado el correspondiente controlador, lo mas normal es que no necesitemos controladores globales, sin embargo,si los necesitamos, los definiremos igual que hemos hecho con todo lo demás

y nos genera el correspondiente fichero:

De acuerdo que el contenido del fichero no es nada del otro mundo:

Pero te crea el fichero, lo sitúa en su sitio y deja definido la clase, el paquete y la ruta….menos da una piedra…..