Inicio > ExtJS, Programación > Primeros pasos con ExtJS

Primeros pasos con ExtJS

miércoles, 9 de junio de 2010 Dejar un comentario Ir a comentarios
Share Button

Estos días estoy revisando soluciones para realizar algunas aplicaciones web; O más concretamente «portar» aplicaciones a un entorno Web. Para ello estoy revisando ExtJS. Segun su página web dice textualmente:

«Ext JS is a cross-browser JavaScript library for building rich internet applications.»

Espero pronto descubrir que si es verdad…  ;-)

Antes de nada debemos preparar el equipo con lo necesario para poder empezar.

Instalar un Web Server

Si es que no tenemos ninguno instalado, deberemos instalar uno; E en los equipos con

Windows XP se puede añadir el IIS de Microsoft, en mi caso he optado por instalar Apache 2.2.8. Podéis descargarlo desde la web de Apache, o como en mi caso seleccionar alguno de los paquetes de instalación que lo incluyen, como es el caso de AppServ (Apache 2.2.8, PHP 5.2.6, MySQL 5.0.51b, phpMyAdmin-2.10.3) disponible en la web de AppServNetwork.

Una vez instalado en vuestro equipo (o en otro) podéis comprobar que el Webserver  funcioma abriendo el explorador en la dirección   http://127.0.0.1 o  http://localhost

En el caso de apache veréis una página similar a esta:

Prepara el directorio para test

En mi caso dentro del directorio donde se publican la páginas (www en  c:\AppServ\www) he creado un directorio

llamado Ejemplos. Dentro de la carpeta ejemplos y para jerarquizer los proyectos he creado una estructura como la que se ve a la derecha. Además debemos crear un directorio ext donde copiaremos el contenido de las librerás ExtJS descargadas desde su página web (versión 2.x).

Dentro del directorio Ejemplos, crearemos las carpetas css, ext, img y js donde almacenaremos los diferentes ficheros de los proyectos.

La prueba definitiva

Finalmente haremos la última comprobación para asegurarnos de que todo funciona correctamente y se ejecutan las ExtJs correctamente. Pare ello crearemos una página HTML en el directorio ejemplos con el siguiente código (que nos servirá de inicio para nuestros ejemplos).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!-- Do NOT put any DOCTYPE here unless you want problems in IEs. -->
<html>
 
<!-- Each valid html page must have a head; let's create one. -->
<head>
  <!-- The following line defines content type and utf-8 as character set. -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
  <!-- Ext relies on its default css so include it here. -->
  <!-- This must come BEFORE javascript includes! -->
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
 
  <!-- Include here your own css files if you have them. -->
 
  <!-- First of javascript includes must be an adapter... -->
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
 
  <!-- ...then you need the Ext itself, either debug or production version. -->
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
 
  <!-- Include here your extended classes if you have some. -->
 
  <!-- Include here you application javascript file if you have it. -->
  <script type="text/javascript" src="./js/application.js"></script>
 
  <!-- Set a title for the page (id is not necessary). -->
  <title id="page-title">Test</title>
 
  <!-- You can have onReady function here or in your application file. -->
  <!-- If you have it in your application file delete the whole -->
  <!-- following script tag as we must have only one onReady. -->
  <script type="text/javascript">
 
  // Path to the blank image must point to a valid location on your server
  Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
 
  // Main application entry point
  Ext.onReady(function() {
 
	// alert("Congratulations!  You  have Ext configured correctly!");
    // console.info('Ejemplo1');
 	Ext.MessageBox.show({
	    title: 'Prueba de mensaje',
	    msg: 'Hola a todos',
	    width: 400, 
	    buttons: Ext.MessageBox.OK
	});
  });
  </script>
 
<!-- Close the head -->  
</head>
 
<!-- You can leave the body empty, or write your content. -->
<body>
<span style="color: rgb(102, 0, 0);">Testeando página de inicio...</span>
</body>
 
<!-- Close html tag at last -->
</html>

Puedes descargar este archivo aquí (comprimido como ZIP).

Si todo ha ido bien y en nuestro navegador escribimos: http://localhost/ejemplos/ deberíamos ver la siguiente pantalla:

En este punto tenemos la instalación correcta y ya podemos comenzar a practicar. Pero eso será otro día…

Share Button
Categories: ExtJS, Programación Tags: ,
  1. Ferreyra federico
    lunes, 5 de julio de 2010 a las 13:36 | #1

    Necesito realizar una consulta sobre la posible modificacion de una funcion en un programa me podrias enviar un correo asi te expliaco lo que necesito, muchas gracias

  2. Federico
    lunes, 5 de julio de 2010 a las 20:13 | #2

    Hola necesito comunicarme con vos para realizarte una consulta sobre delphi, veo que la tenes muy clara y me gustaria que me ayudaras a resolver un problemita que tengo, por favor mandame un mail a mi direccion electronicanehuen@yahoo.com.ar asi te lo puedo responder porque no tengo tu direccion la busque por toda la web pero no hay rastros, gracias disculpa las molestias.

  3. Neftalí
    lunes, 5 de julio de 2010 a las 21:01 | #3

    @Federico
    Hola Federico.
    Si tienes consultas sobre Delphi, te recomiendo que te des de alta en alguna web donde puedas realizar consultas. Pásate por el clubdelphi (www.clubdelphi.com); yo mismo ando por allí, y mucha otra gente que sabe mucho del tema y te puede ayudar.

    un saludo.

  4. Ferderico
    martes, 6 de julio de 2010 a las 15:01 | #4

    Buenas, si ya me di de alta en esa pagina, pero en realidad queria dar directamente con alguien que sepa mucho del tema, vos podras darme una mano, gracias.

  5. Neftalí
    martes, 6 de julio de 2010 a las 15:17 | #5

    @Ferderico
    Hola Federico.

    Haz tus consultas allí, como ya te he comentado, suelo estar por los foros del Clubdelphi y seguramente contestaré a tus preguntas si puedo ayudarte. Este no es el lugar apropiado para eso.
    Además puedo asegurarte de que hay gente en los foros que sabe mucho (mucho más que yo) y que gustosamente también te ayudarán.

    Un saludo.

  6. Federico
    miércoles, 7 de julio de 2010 a las 02:45 | #6

    Ok, gracias.
    Intente realizar una consulta en el foro pero me dice que el administrador no me habilito lsa cuenta para realizar consultas, me podrias habilitar, vos sos moderador. gracias

  1. Sin trackbacks aún.
What is 16 + 29 ?
Please leave these two fields as-is:
IMPORTANTE! Para continuar, debes contestar la pregunta anterior (para evitar SPAM) :-)