Aprendiendo Ext JS 3

Instalación básica del Framework Más videos

Descripción del tema

Una vez que sabemos donde descargar la librería oficial de Ext JS, lo siguiente es aprender como instalar el framework en el proyecto que vamos a comenzar, en este tema se explica como hacerlo.

Servidor Web

Para este tema y la mayor parte del curso, voy a usar un servidor Web. Para no tener problemas con la instalación voy a utilizar un sencillo instalador de Apache2, PHP5, MySQL; el instalador se llama AppServ y lo puedes descargar desde su sitio oficial. La instalación es muy sencilla solo sigue los pasos del Wizard, una vez instalado es necesario abrir el directorio donde lo instalaste y en la carpeta "www" crea un directorio que se llame "curso", dentro de este, crea otro directorio que se llame "ext-2.2" y otro que se llame "instalacion" (sin el acento).

Copiar los archivos y carpetas necesarias

Dentro del directorio ext-2.2 es necesario copiar los siguientes archivos y carpetas de la librería que descargamos en el tema anterior.
  • ext-all.js: en este archivo se encuentran todos los widgets y componentes del framework.
  • adapter: en esta carpeta se encuentran varias librerías como prototype, jQuery, YUI y Ext JS, en otro tema se explica detalladamente el uso de estos archivos, por ahora simplemente copia todo el contenido.
  • Resources: en esta carpeta se encuentran las imágenes y estilos necesarios para los componentes del framework.

Importar el Framework en un HTML

Para importar el Framework a un documento HTML, es necesario importar el estilo, el adapter y los componentes. A continuación se muestran las respectivas rutas:

  • ext-2.2/resources/css/ext-all.css
  • ext-2.2/adapter/ext/ext-base.js
  • ext-2.2/ext-all.js

En la parte superior derecha de esta página puedes descargar el HTML que se utilizará para este ejemplo, también puedes descargar el código fuente o ver el ejemplo ejecutándose.

Para importar los archivos mencionados lo hacemos de la siguiente manera:
<link rel="stylesheet" type="text/css" href="../ext-2.2/resources/css/ext-all.css" />
 
<script type="text/javascript" src="../ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-2.2/ext-all.js"></script>

Probando el Framework

Para probar la instalación, voy a mandar mostrar un alert cuando el DOM este listo para ser utilizado, así que voy a poner un listener al evento "onReady", de la siguiente manera:
Ext.onReady(function(){
            alert('well done!!');
});
El evento onReady es muy semejante al evento onLoad, la diferencia es que el evento onLoad se dispara hasta que todos los elementos de la página han sido completamente descargados al navegador; esto incluye imágenes, estilos, JavaScript y el DOM construido. El evento onReady se dispara cuando el DOM está listo, no importa que las imágenes no han terminado de descargarse completamente; esto nos ayuda a no tener que esperar tiempos largos para poder ejecutar nuestro código.

Ejecutando el ejemplo

Para ejecutar lo que acabamos de realizar es necesario ir a tu explorador favorito y abrir el HTML que acabamos de hacer. En la URL escribe http://localhost, con esto accedemos al directorio raíz del servidor que instalamos al principio, ahí debe aparecer la carpeta curso; dentro de esta debe estar la carpeta "ext-2.2" e "instalacion", en la carpeta instalación es donde se guardó el HTML. Si todo ha salido bien, al abrir el HTML aparecerá el alert mostrando un mensaje, el cual nos indica que instalamos correctamente el Framework.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

45Comentarios

  • Avatar-2 Skyx19 22/05/2009

    Excelente deberias hacer empezar un pequeño cursillo de javascript o php, lo explicas claramente y lo haces ver muy sencillo.

    • Avatar-9 yadian 03/06/2009

      Magnifico este curso, Gracias

      • Avatar-10 obelich 11/07/2009

        Hola felicitaciones esta excelente tus videotutoriales ahora ando en una encrusijada si usar Jquery o Ext Js las dos opciones son muy buenas para el desarrollo ahora estoy desarrollando un sistema para la empresa donde trabajo una agencia de importacion y exportacion, y pienso hacer un sistema de trafico y me gusta mucho el estilo k se le dan :P beuno felicidades y gracias por compartir tus conocimientos ^_^

        • Avatar-7 anRoswell 12/07/2009

          Gracias amigaso, me sirvio

          • Avatar-10 Felipe Chavez 13/07/2009

            Hola a todos, primero que todo quiero felicitarlos por esta web, o mejor dicho este proyecto esta increíble, ahora después de haber saludado les cuento que tengo un problema, después de instalar el appserv en el momento de la comprobación tanto firefox como IE, me botan una página diferente a la del video, me da la opción de PHPMYADMIN DATABASE MANAGER VERSION 2.10.3 cuñado cliqueo me dice que agrega el nombre de usuario y contraseña, lo agrego y doy aceptar y reaparece el cuadro con l campo contraseña en blanco, lo vuelvo a hacer y pasa o mismo de nuevo, y así sucesivamente, hasta que cancelo y la página me dice que coloque al contraseña incorrecta. No sé que pueda ser. De antemano gracias

            • Avatar-10 Crysfel 13/07/2009

              Realmente no tienes ningún problema, eso es normal y significa que has instalado correctamente el servidor web, ahora lo que tienes que hacer es crear la carpeta "curso" dentro de la carpeta "www" que aparece en el directorio donde instalaste el "appserv", al hacer esto en el explorador te aparecerá correctamente. saludos

              • Avatar-2 Felipe Chavez 13/07/2009

                Huy que lujaso contar con una respuesta tan rapida, gracias, pues yo pensaba igual pero ya monte la carpeta curso dentro de www, todo lo qeu me aparece es esto... The AppServ Open Project - 2.5.10 for Windows phpMyAdmin Database Manager Version 2.10.3 PHP Information Version 5.2.6 About AppServ Version 2.5.10 for Windows AppServ is a merging open source software installer package for Windows includes : # Apache Web Server Version 2.2.8 # PHP Script Language Version 5.2.6 # MySQL Database Version 5.0.51b # phpMyAdmin Database Manager Version 2.10.3 * ChangeLog * README * AUTHORS * COPYING * Official Site : http://www.AppServNetwork.com * Hosting support by : http://www.AppServHosting.com Change Language : Easy way to build Webserver, Database Server with AppServ :-)

                • Avatar-3 Elias 22/08/2009

                  Amigo en un servidor propio esto ya vienen con este framework? Saludos

                  • Avatar-2 deivid 19/10/2009

                    el curso esta exelente , pero tengo una duda cuando estoy probando el framework lo que me muestra es lo mismo que a felipe chavez me gustaria saber si esta correcta la instalacion o por el contrario hay un error, gracias de antemano

                    • Avatar-9 Crysfel 19/10/2009

                      Si ves algo en la dirección "http://localhost" entonces tu instalación es correcta, si no ves nada es que no se instaló bien. Saludos

                      • Avatar-6 deivid 20/10/2009

                        gracias por contastarme tan pronto, el problema es que en la pantalla que me aparece yo no puedo hallar la carpeta curso y por lo tanto no puedo seguir desarrollando el curso que es lo que debo hacer???????? gracias

                        • Avatar-9 Crysfel 20/10/2009

                          Esa carpeta (curso) tu la tienes que crear, ahi es donde trabajaremos ;) Saludos

                          • Avatar-9 Luis 05/01/2010

                            hola Crysfel tengo una duda tengo el wamp con el que hago la spruebas para el php, puedo usarlo para js en vez de del appservenetwork?

                            • Avatar-3 Crysfel 05/01/2010

                              Claro!, solo recuerda colocar tus archivos en la carpeta "www", en mi caso "C:\development\wamp\www" saludos

                              • Avatar-12 Karla Perla 11/01/2010

                                Hola!!! Por fin pude instalar extjs en mi ambiente, despues de muchas paginas buscadas aqui si pude instalarlo, y ya me sale el primer ejemplo, solo que estoy tratando de hacer el ejemplo de esta pagina http://www.extjs.com/deploy/dev/examples/grid-filtering/grid-filter-local.html y no me sale, copie y pegue el codigo que se puede obtener de esa pagina, importe todos los js que necesito y aun asi me marca un error, podrias ayudarme please =) Gracias! que buena pagina!

                                • Avatar-9 Pedro 29/04/2010

                                  guay, ya decidi empezar y de momento bien, gracias

                                  • Avatar-11 Manuel 03/05/2010

                                    hola tengo un problema despues de haber exportado el proyecto q se realiza en el designer al momento de hacer sobre el index q me genero no sale lo q diseñe y al ver el error "dice se esperaba un objeto es el index.js" q me genera aguien q me ayude

                                    • Avatar-11 Javier Hernandez 29/06/2010

                                      Estimado, estoy el framework pero me da error en el Ext.OnReady, no lo reconoce a pesar de estar cargados, lo probe con firefox con firebug y iexplorer. podrian hecharme una manito. Saludos, atte. Javier

                                      • Avatar-8 Javier Hernandez 29/06/2010

                                        ahhh. ocupo el wamp y no appsrv...puede ser ahi la diferencia?

                                        • Avatar-3 Javier Hernandez 29/06/2010

                                          asi esta el codigo : Basic Instalacion Ext.OnReady(function(){ alert('Well Done!!'); });

                                          • Avatar-11 Javier Hernandez 29/06/2010

                                            . . . . .Basic Instalacion . . . .. .. ..Ext.OnReady(function(){ .. alert('Well Done!!'); ..}); .. . . . ..

                                            • Avatar-8 Javier H 29/06/2010

                                              Hola estimados, excelente tutorial, muy didactico e intuitivo. he probado este ejemplo tanto en WAMP como en APPSRV y el error siempre es el mismo... ...en el script type... hay que colocar el src="...ext-all.js" para que tome el Ext.OnReady?...yo lo hice asi y el error dejo de salir...pero el ALERT no aparece?.... me pueden hechar una manito soldaria plis... Saludos, atte.

                                              • Avatar-5 Javier H 30/06/2010

                                                Estimados, Error mio, en realidad en Ext.OnReady...esta MAL... es Ext.onReady la letro "o" en minuscula, por eso no funcionaba. Solucionado... Saludos, atte. Javier H.

                                                • Avatar-3 salvador torres 08/07/2010

                                                  buen curso!! te voy siguiendo paso a pasin.. gracias.. amigo por tomarte el tiempo..y pues a desarrollar algo!!

                                                  • Avatar-4 raymundo 13/07/2010

                                                    Muchas gracias por este curso, es muy bueno para los que empesamos con este framework

                                                    • Avatar-5 Jaimes 15/09/2010

                                                      Muy buen curso, se nota que dominas el tema a la perfeccion por que todo lo explicas muy sencillo

                                                      • Avatar-9 Luis 04/10/2010

                                                        hola, ante todo gracias por ilustrarme, estoy iniciandome en Extjs y tengo un pequeño problema: ejecuto el mensaje de prueba y me sale este error: window.undefined=window.undefined;Ext={version:"3.1.1"}

                                                        • Avatar-6 vane 02/02/2011

                                                          Hola, yo hice el mismo ejemplo pero instale fue xampp. lo coloq en la carpeta htdocs.. pero me sale el sieguient error missing ( before formal parameters [Interrumpir en este error] Ext.onReady =function{ como podria solucionar, gracias

                                                          • Avatar-12 vane 02/02/2011

                                                            no lo tengo con el igual sino de la sieguiente forma Ext.onReady ((function){

                                                            • Avatar-9 sergio 12/03/2011

                                                              Hola Acabo de comenzar a ver el tema de Ext, estoy siguiendo tu curso, enhorabuena es fantastico para comenzar a movernos por este mundo. He seguido tus pasos, tal como pones, con appserver. pero como a muchos usuarios no consigo que salga el mensaje. Segun el IE y Mozilla. El error es que no "Ext, no esta definido". tengo el fichero que tienes en tu blog. La version del IE es la 8.06 ----------------------------------- Basic Installation Ext.onReady(function(){ alert('well done!!'); }); ----------------------------------- Alguien a podido encontrar el problema un saludo

                                                              • Avatar-9 Wilfredo Victor 23/05/2011

                                                                Hola Crysfel te escribo para consultarte lo siguiente quizas me quieras aqudar a solucionar este problema: Tengo un formulario creado con ExtJs en Firefox queda y carga excelente pero cuando lo cargo en ie8 me manda la siguiente alerta "dom is null or not an object " y no me presenta el formulario completo. ext-all.js

                                                                • Avatar-4 kaname 28/05/2011

                                                                  Wuaa @Crysfel ésta muy beno el curso!!

                                                                  • Avatar-6 GUSTAVO GONZALEZ YON 22/07/2011

                                                                    MUY BUENOOO EL CURSOOO .... BRO TENGO UN PROBLEMA NO PUEDO DESCARGAR EL APACHE2,MYSQL ETC TENGO WINDOWS VISTA Q PUEDO HACER

                                                                    • Avatar-9 ruben 24/08/2011

                                                                      bien

                                                                      • Avatar-9 Jose 11/02/2012

                                                                        De donde sacaste el archivo html perdon

                                                                        • Avatar-3 Oscar Careaga 21/02/2012

                                                                          Una pregunta donde puedo encontrar el archivo HTML??

                                                                          • Avatar-9 Oscar Careaga 21/02/2012

                                                                            Ya lo encontré! gracias!

                                                                            • Avatar-4 Oscar Careaga 22/02/2012

                                                                              Gracias! Funciona!

                                                                              • Avatar-11 Adan Luna 30/06/2014

                                                                                Hola que tal, si descarge el extjs 5 que carpetas son las que tengo que copiar, ya que no me aparecen las anteriormente mencionadas

                                                                                • Avatar-11 Crysfel Villa 01/07/2014

                                                                                  Hola Adan, ExtJS5 es muy diferente a Ext3, desde Ext4 ya no se usan adapters, el sistema de clases cambio completamente, ya estoy trabajando con un amigo para sacar un curso de Ext5 :) Saludos

                                                                                • Avatar-11 william 03/06/2015

                                                                                  Saludos amigo, necesito aprender Ext JS en su versión 3, entiendo bien las grandes diferencias que hay entre las versiones anteriores y las más recientes, mi pregunta es: Que tan grandes son las diferencias entre ext js 2.2 que es este curso a la versión 3.4? Gracias de antemano.

                                                                                • Avatar-8 Ramiro Cobas 07/12/2017

                                                                                  Muy bien todo esta explicado al detalle. Asi quedó mi libreria ExtJS con la ayuda del NetBeans.

                                                                                • Avatar-6 Ramiro Cobas 07/12/2017

                                                                                  &lt;!-- Estilo CSS de Ext --> &lt;!-- Libreria de ext CSS Ext -->

                                                                                  Instructor del curso

                                                                                  Crysfel3

                                                                                  Autor: Crysfel Villa

                                                                                  Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                                                                                  Descarga Código Fuente Ver Demostración

                                                                                  Regístrate a este curso

                                                                                  Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                                                                                  Tendrás acceso a descargar los videos, códigos y material adicional.

                                                                                  Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                                                                                  Llevarás un registro de tu avance.