Instalación básica del Framework Más videos
Descripción del tema
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.
Instructor del curso
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.
45Comentarios
Excelente deberias hacer empezar un pequeño cursillo de javascript o php, lo explicas claramente y lo haces ver muy sencillo.
Magnifico este curso, Gracias
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 ^_^
Gracias amigaso, me sirvio
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
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
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 :-)
Amigo en un servidor propio esto ya vienen con este framework? Saludos
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
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
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
Esa carpeta (curso) tu la tienes que crear, ahi es donde trabajaremos ;) Saludos
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?
Claro!, solo recuerda colocar tus archivos en la carpeta "www", en mi caso "C:\development\wamp\www" saludos
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!
guay, ya decidi empezar y de momento bien, gracias
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
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
ahhh. ocupo el wamp y no appsrv...puede ser ahi la diferencia?
asi esta el codigo : Basic Instalacion Ext.OnReady(function(){ alert('Well Done!!'); });
. . . . .Basic Instalacion . . . .. .. ..Ext.OnReady(function(){ .. alert('Well Done!!'); ..}); .. . . . ..
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.
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.
buen curso!! te voy siguiendo paso a pasin.. gracias.. amigo por tomarte el tiempo..y pues a desarrollar algo!!
Muchas gracias por este curso, es muy bueno para los que empesamos con este framework
Muy buen curso, se nota que dominas el tema a la perfeccion por que todo lo explicas muy sencillo
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"}
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
no lo tengo con el igual sino de la sieguiente forma Ext.onReady ((function){
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
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
Wuaa @Crysfel ésta muy beno el curso!!
MUY BUENOOO EL CURSOOO .... BRO TENGO UN PROBLEMA NO PUEDO DESCARGAR EL APACHE2,MYSQL ETC TENGO WINDOWS VISTA Q PUEDO HACER
bien
De donde sacaste el archivo html perdon
Una pregunta donde puedo encontrar el archivo HTML??
Ya lo encontré! gracias!
Gracias! Funciona!
Hola que tal, si descarge el extjs 5 que carpetas son las que tengo que copiar, ya que no me aparecen las anteriormente mencionadas
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
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.
A nivel del API no tantas, de hecho mas adelante en este mismo curso se usa la versión 3.x. Saludos
Muy bien todo esta explicado al detalle. Asi quedó mi libreria ExtJS con la ayuda del NetBeans.
<!-- Estilo CSS de Ext --> <!-- Libreria de ext CSS Ext -->
<!-- Estilo CSS de Ext --> <!-- Libreria de ext CSS Ext -->