Ext JS - Instalación

1 comentarios

Antes de empezar, expreso mis saludos a todos mis amigos que son padres, hoy es su día y espero estén celebrando como se debe. En especial un saludo a los papás sistémicos e informáticos que conozco y que le hechan duro a la chamba para que su familia no le falte nada.

Ahora sí, manos a la obra:
En el presente mini tutorial mostraré como empezar a utilizar Ext JS en una página web simple. En un posterior post enseñaré como interactuar con el servidor web.

Para poder empezar a utilizar Ext JS basta con inlcuir 2 archivos(un CSS y un javascript) en un página HTML. Y menciono HTML para desligarlo de cualquier tecnología del lado del servidor(PHP, Servlet o JSP) ya que como mencioné en el post anterior Ext JS es un framework JavaScript por tanto se ejecuta en el cliente(browser). Disculpen si hago incapié en esto pero me interesa que todo vaya quedando claro.

Ahora sí, los pasos para hacer el "Hola Mundo" fundamental y el que servirá como punto de partida para aprender Ext JS.

Paso 0:
* Descarga Ext JS 4.0 del siguiente link:
http://www.sencha.com/products/extjs/download/ext-js-4.0.2a/213
* Crea una carpeta llamada demo01 en su interior crea un HTML llamado index.html
El cuerpo del HTML que sea algo simple como:


<html>
<head></head>
<body></body>
</html>


No necesitamos nada más para empezar.
* Dentro de la carpeta demo01 crea otra llamada extjs, y dentro de esta carpeta copiarás el archivo ext-all.js y la carpeta resources que se encuentran en los fuentes descargados de Ext JS 4.0.

Paso 1:
Dentro del elemento <head>...<head> añade las siguientes líneas:

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/ext-all.js"></script>

Nota: En versiones anteriores a la 4 era necesario incluir un archivo adicional (el adapter) pero ahora ya no lo es.

Paso 2:
Dentro del elemento <body> ... </body> añade las siguientes líneas:

<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.show({
title:'Info',
msg:'Hola Mundo',
buttons:Ext.MessageBox.OK,
icon:Ext.MessageBox.INFO
});
});
</script>


Paso 3:
Ejecuta index.html y observa el resultado.
Verás el mensaje "Hola Mundo" dentro de una ventana flotante.

El MessageBox es solo uno de los muchos componentes que tiene Ext JS.
Siempre que tengas dudas de la sintaxis o requieres información
de qué parámetros utilizar héchale un vistazo al API, que es muy bueno:
http://dev.sencha.com/deploy/dev/docs/

Ahí puedes consultar la clase Ext y su método onReady, al igual que la clase Ext.MessageBox y su método show.

Noten que hablo de clases; cuando vean el API entenderán a que me refiero. Los creadores de este framework lo conceptualizaron así y acertaron en hacerlo ya que te permite crear componentes a partir de los que ya existe(HERENCIA), de esto hablaremos mas adelante.