Hola Mundo
   |
| SuNcO |
  Apr 19 2009, 11:43 PM
Post
#1
|
|
Administrador  Group: Admin Posts: 645 Joined: 21-October 05 Member No.: 1  |
Hace poco, en la busqueda de herramientas de programacion, me comentaron sobre una libreria llamada ExtJs, la cual viene siendo como manejar JavaScript con estilo
Con esta libreria puedes hacer muchas cosas interesantes, si quieres ver que cosas pueden lograrse puedes visitar la pagina oficial de ejemplos http://www.extjs.com/deploy/dev/examples/samples.html Al inicio se me hizo complicado/complejo/dificil, pero conforme lo fui utilizando vi que no era lo que pensaba, es mas sencillo de lo que pensaba. Algo que me parese interesante es que la Api es muy completa Primero tienes que descargar la libreria: http://extjs.com/products/extjs/download.php Descargar la que dice Ext JS 2.2.1 SDK y lo descomprimes en una carpeta En el codigo siguiente resaltan 4 lineas que tendras que poner en todos tus codigos, las cuales son para cargar la libreria, el lenguaje en español, los estilos.. Tambien vemos 3 botones y 2 cajas de texto  Ejemplo funcionando: http://www.codigoplus.com/ejemplos_extjs/extjs_1.html CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ejemplo 1 - Hola mundo</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" src="extjs/source/locale/ext-lang-es.js"></script> <!-- lenguaje - español --> </head> <body style="padding:10px"> <input type="button" value="MsgBox | Aceptar" onclick="Mensaje(1)"> <br><br> <input type="button" value="MsgBox | Si, No" onclick="Mensaje(2)"> Resultado <input type="text" size="3" id="resultado_2" style="text-align:center"> <br><br> <input type="button" value="MsgBox | Pregunta" onclick="Mensaje(3)"> Resultado <input type="text" size="20" id="resultado_3"> </body> </html> Por si solo no hacen nada. ahora vamos a poner el codigo JavaScript CODE <script language="JavaScript"> function Mensaje(tipo) { if (tipo == 1) { Ext.MessageBox.show({ title : 'Error', msg : 'Este es un mensaje de error', buttons : Ext.MessageBox.OK, icon : Ext.MessageBox.ERROR }); } // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - if (tipo == 2) { Ext.MessageBox.confirm('Titulo', '¿ Estas seguro de ... ?', function (btn) { if (btn == "yes") { document.getElementById("resultado_2").value = "Si"; } else { document.getElementById("resultado_2").value = "No"; } } ); } // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - if (tipo == 3) { Ext.MessageBox.prompt('Nombre', 'Escribe tu nombre:', function (btn, text) { if (btn == "ok") { // para forzar que cuando presionen Aceptar contenga un Texto /*if (!text) { Mensaje(3); return; }*/ document.getElementById("resultado_3").value = "Aceptar : " + text; } else { document.getElementById("resultado_3").value = "Cancelar"; } } ); } } </script> |
   |
 
|
 |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
| Lo-Fi Version | Time is now: 12th March 2010 - 03:04 PM |