Usando Sencha Extjs: Primeros pasos

Primero cuando usamos este framework debemos estar seguros de tener todo lo necesario para su uso, dentro de lo necesario para su uso esta un navegador web: Internet Explorer 8 a mas, Firefox(version actual), Opera (version actual), Chrome (La ultima version), Maxthon (version actual), Icedragon (version actual), etc. Necesitamos tambien tener el framework descargado este lo conseguimos dentro de la pagina Sencha.com (link), es bastante recomendable que usen la ultima version del framework.

Ahora otra cosa mas que es util a la hora de programar con Extjs es un buen editor o IDE para javascript, de acuerdo a sus costumbres de programacion pueden hacer uso de Notepad++, SublimeText, Netbeans, u otro editor que les de flexibilidad a la hora de escribir su codigo.

La lista final seria:

  • Ext JS 4.2
  • Sencha Cmd
  • XAMPP
  • Editor Javascript
  • Firefox
  • Firebug
  • Illuminations for Developers
  • Chrome
  • Ruby

nota los que estan con negrita son totalmente necesarios

El comprimido del framework extjs, para poder usarlo correctamente, debemos descomprimirlo en una ruta accesible para los scripts de javascript a hacer correr, es preferible tener el extjs descomprimido en el mismo nivel de nuestro proyecto en desarrollo.Lo primero a hacer una vez que se ha conseguido todo lo necesario e instalado todo el software a usar, escribimos el codigo de llamada de los scripts a ejecutarse en el html principal:

Archivo html

Despues de esto editamos el archivo app.js con el siguiente codigo (no olvidemos que este archivo debe estar al mismo nivel del archivo .html que usemos):

app.js

Seguidamente debemos crear la estructura minima de nuestro proyecto una carpeta app dentro del directorio del proyecto, y dentro de app un directorio controller donde a continuacion escribimos el codigo de nuestro controlador principal del proyecto en este caso seria HomeController.js, usamos este codigo:

homecontroller

Una vez  que hemos redactado todo este codigo ya podemos proceder a ejecutar nuestro proyecto en un navegador, para lo mismo solo debemos abrir con un navegador el archivo .html de nuestro proyecto. Si todo salio correcto debe salirnos un mensaje como este en pantalla:

Salida

Codigo: https://dl.dropboxusercontent.com/u/12443541/blogger/extjs/1.-primeros%20pasos/HomeController.rar

Imagenes: http://imgur.com/a/jXMpl#0

Autor: Christian Portilla Pauca

11 comentarios en “Usando Sencha Extjs: Primeros pasos

  1. Hola acabo de descargar tu codigo y funciona ok, pero al realizarlo paso a paso me sale error en el archivo app.js en la primera linea de codigo Ext.Loader.setConfig me dice que ‘Ext’ no está definido.

    • Es simple has descomprimido mal el extjs y de seguro has escrito mal la direccion donde esta ubicado tu extjs, por eso no esta definido el objeto Ext que es la base o mejor dicho el core de todo el extjs. Revisala bien la ruta que usaste lo mas seguro esta mal escrita, tiene que acceder al archivo del extjs sino simplemente nunca cargara nada ni funcionara nada.

      • Gracias, si era problema de ruta me faltaba colocar «/» antes de la la ruta «extjs/ext-all.js». Saludos sigue adelante.

Replica a christian portilla pauca Cancelar la respuesta