Instalación de la librería Más videos
Descripción del tema
En este tema se muestra como instalar la librería de Ext JS 4, para eso se necesita tener instalado un servidor Web. Hay muchos servidores Web que se pueden usar para este curso, WAMP es un servidor Web fácil de instalar y de usar en Windows. En este curso se estará usando el que ya viene instalado con el MacOs, solo se necesita habilitarlo en System Preferences -> Sharing -> Web Sharing. La base de datos que se va a usar en todo el curso es MySQL.
Creando los archivos necesarios
Lo primero que se debe hacer es crear una carpeta donde se va a estar trabajando en este curso en el web root del Servidor Web que se haya instalado previamente. El nombre de la carpeta es curso y ahí vamos a estar poniendo todos los ejercicios que se van a hacer durante este curso. El siguiente paso es copiar la librería de Ext JS dentro de la carpeta curso y crear un folder llamado 01-introduccion que es donde vamos a estar trabajando en este tema.
Es necesario tener instalado un editor de texto, hay muchos editores de texto que se pueden usar, como el Notepad++, Textmate, etc; en este curso se estará usando Sublime Text el cual se puede descargar e instalar para Windows, MacOS y Linux. En el editor de texto abrimos la carpeta que acabamos de crear y creamos un archivo HTML llamado instalacion dentro de la carpeta 01-introduccion. En el documento HTML, agregar el Doctype y poner el título Instalacion.
Instalando Ext 4
Lo único que se necesita hacer para instalar la librería de Ext es importar la hoja de estilos y el Javascript de Ext. Es importante importar en primer lugar la hoja de estilos que se encuentra en ../extjs-4.1.0/resources/css/ext-all.css y luego importar el Javascript que se encuentran en ../extjs-4.1.0/ext-dev.js.
Para comprobar que se haya importado Ext correctamente, es necesario abrir el navegador y navegar hacia localhost/curso/01-introduccion/Instalacion.html, aunque no se vea nada en la ventana deberíamos poder ver en la consola que el objecto Ext existe.
Hasta este momento el código que debes tener en el archivo HTML es el siguiente:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Instalación</title> <link rel="stylesheet" href="../extjs-4.1.0/resources/css/ext-all.css"/> <script type="text/javascript" src="../extjs-4.1.0/ext-dev.js"></script> </head> <body> </body> </html>
Probando el Framework
Para probar que Ext está funcionando vamos a crear una ventana. Antes de crear la ventana es necesario usar el método Ext.onReady, ya que este método escucha el evento domReady que es disparado cuando el árbol del DOM está listo. El método Ext.onReady recibe como parámetro la función que va a ser disparada cuando el DOM esté listo, en este caso estamos usando la función Ext.create que se usa cuando se quiere crear la instancia de alguna clase de Ext.
Para crear una ventana se usa la clase Ext.window.Window y para mostrar la ventana se usa el método show(). Hasta este momento el archivo HTML debe verse así:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Instalación</title>
<link rel="stylesheet" href="../extjs-4.1.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs-4.1.0/ext-dev.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var win = Ext.create('Ext.window.Window',{
title : 'Ejemplo 1',
width : 300,
height : 250
});
win.show();
});
</script>
</head>
<body>
</body>
</html>
Ahora al probar el ejemplo en el navegador, deberíamos ver una ventana de color azul celeste, la cual se puede cerrar, mover y redimensionar.
Si checamos la consola podemos ver que hay un warning que dice que deberíamos considerar usar el Ext.require antes del Ext.onReady, esto quiere decir que todas las clases que se van a usar para desplegar la ventana se están cargando dinámicamente, es importante mencionar que para que esto suceda correctamente necesitamos usar un servidor web ya que la carga dinámica se realiza mediante Ajax.
<script type="text/javascript" src="../extjs-4.1.0/ext-all-dev.js"></script>
Si usamos el ext-all-dev.js podemos ver que el warning ya no aparece en la consola ya que este archivo contiene absolutamente todas las clases que tiene Ext 4, asi mismo si no estamos usando un servidor web veremos que el ejemplo funciona adecuadamente. Es importante recordar que al momento de desarrollar es mejor usar el archivo ext-dev.js ya que tiene lo mínimo para cargar la librería, incluso podemos crear nuestra versión de ExtJS y así reduciríamos el tamaño de la librería, ya que solamente generaremos un archivo con las clases que estamos utilizando; este archivo es el que usaríamos en producción.
Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Fundamentos de Ext 4, 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 Fundamentos de Ext 4, 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.
6Comentarios
Excelente video y la información muy completa. Los felicito..seria bueno que fueran sin costo los otros topicos tambien.
Que bien que te ha gustado el contenido, el precio del curso está bastante accesible, la idea es tener contenido de calidad a bajo costo :)
Excelente me gustaría que realice un ejemplo con SIG.Expecificamente con geoext
Hola Crysfel, recuerdo hace varios años atras use la version 3 para un proyecto que realice. Ahora veo que en la version 4 cuesta usar el framework, mi pregunta es existe alguna version free para desarrollo
Hola Edgar. ExtJS4 también tiene una versión GPL que te permite usar la librería gratuitamente siempre y cuando tu proyecto sea liberado con licencia GPL. Más información aquí: http://www.sencha.com/legal/open-source-faq/ Saludos
Cuanto vale el curso completo