Archive

Archive for April 9th, 2009

Hola Mundo ExtJs 2.2

April 9th, 2009
2 comments

Hola Amigos,

Esta semana estoy comenzando un proyecto donde usare ExtJs. Asi que decidí hacer un Hola Mundo con ExtJS.

ExtJs es una librería de componentes javascript. Esta librería es muy rica en componentes visuales.

Algunas cosas que mas me gustan de ExtJs

  • Tiene soporte nativo para realizar llamadas Ajax
  • El componente tabla es uno de los mejores(Antes yo usaba displaytag)
  • Su formulario tiene la opción de información al servidor sin hacer submit de toda la pagina

Vamos al ejemplo

Lo que vamos a necesitar es bajar la libreria.

El archivo zip contiene varias carpetas y archivos de los cuales, para que podamos usar extjs solo necesitamos.

  • archivo: ext-core.js
  • archivo: ext-all.js
  • folder: adapter
  • folder:resources

Estoy archivos y folders los colocamos en una carpeta llamada extjs, para poder referenciarlos luego.

Ahora el html

?View Code HTML
<html>
<head>
    <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">
        Ext.onReady(function() {
            new Ext.Panel({
                renderTo:'testPanel',
                html:"noticeboard"
            });
        });
    </script>
</head>
<body>
<div id="testPanel"></div>
</body>
</html>

ext-all.css, como supondrán, es este archivo se encuentran las hoja de estilos que se usan en los componentes visuales.

ext-base.js y ext-all.js, son las librerías que contienen el código javascript de ExtJs.

Ext.onReady( … ), Es una función especial de ExtJs que nos sirve para inicializar o crear componentes. Esta funcion se llama después de haver cargado por completo la pagina HTML. es casi como la funcion onload() del elemento body.

new Ext.Panel, Es la forma de crear un simple panel. En el ejemplo estoy indicando que se creara un panel que luego se dibujara en el elemento html que tenga como id igual a “testPanel” y que tiene como contenido html una simple cadena “Hola Mundo”

id=”testPanel”, bueno solo es para decir que el elemento DIV tendra como id el string “testPanel”. Este id es referenciado al momento de crear el Panel.

Recomendaciones

Si eres nuevo en ExtJs, te recomiendo entrenarte en Json(Notacion de Java Script para Objetos), ya que es la notación que se utiliza para crear la mayoría de los componentes.

Lee el Api del componente que vas a utilizar, muchas veces queremos correr antes de caminar. En este caso si seria bueno caminar un poco. El Api de ExtJs contiene la ayuda necesaria para crear los componentes.

Bueno esto seria por hoy. :) Hasta la proxima. Y como siempre, cualquier comentario o corrección es bien recibido.

Recursos:

Renan Huanca ExtJs 2.2