Enjoy A New Student Discount All 55,000 Courses on sale for Only $12.99

Ends in 05h 23m 49s

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:

Sencha. Arrancando el servidor web
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

Sencha. Utilizando el servidor web de CMD

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:

Sencha. Compilando la aplicacionAutomá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,

Estructura del directorio buid en Sencha CMDPrecisamente, 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:

Sencha CMD. Generando modelo

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

Sencha CMD. Clase creada para modelo

Generando vistas

Si queremos añadir una vista, podemos hacer:

Sencha CMD. Generando una vista

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

Sencha CMD. La carpeta de la vista generadaEn 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

Sencha generando controladores

y nos genera el correspondiente fichero:

Sencha cmd. Generando el controladorDe acuerdo que el contenido del fichero no es nada del otro mundo:

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

 

 

 

 

Deja un comentario

/*Si te ha gustado el artículo
no dudes en compartirlo*/

Facebook
Twitter
LinkedIn

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies

Ver mi IP

Ver ip de mi máquina
tipo valor
Ip: 18.208.172.3
Proxy: 18.208.172.3
Remote host: ec2-18-208-172-3.compute-1.amazonaws.com
Remote port: 14490
** 18.208.172.3