Aunque al inicio pensé buscar un framework javascript sólo para simplificar y estandarizar el código para todos los navegadores y poner algunos efectos a las páginas; en realidad pueden hacer mucho más. Los dos últimos frameworks mencionados tienen además una serie de controles (denominados también widgets) que permiten implementar características interesantes, entre las que resaltan:
- Posibilidad de dividir la pantalla en paneles resizables (layouts).
- Posibilidad de incluir temas.
- Inclusión de controles de entrada de datos especiales como spinner, calendar
- Inclusión de controles que soportan validación de datos.
- Posibilidad de asignar tooltips a los controles.
- Poder diseñar menús drop-down y contextuales.
- Agrupar controles en tabs (pestañas).
- Rejilla (grid).
- TreeView.
- ListView.
- Combos editables.
- Listas con Imágenes.
- Diálogos modales de ventanas (simuladas) y reales (divs).
- Ventanas.
- Posibilidad de crear nuevos controles y de extender la funcionalidad de los ya existentes.
Para empezar, hay que descargarlo desde:
http://extjs.com/products/extjs/download.php?dl=extjs21
- Descomprimirlo en cualquier sitio.
- Crear una página HTML y ponerle cualquier nombre.
- Escribir el siguiente código:
<html>
<head>
<title>Anchor Layout</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(alert("Hola Mundo"));
</script>
</head>
<body>
</body>
</html>
Explicando:
- Para establecer la apariencia de los controles, hemos puesto esta línea:
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
- Para el soporte de los controles básicos, hemos puesto esta línea:
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
- Se ha incluido también la librería básica del framework:
<script type="text/javascript" src="ext/ext-all.js"></script>
- El objeto Ext, es el objeto principal de la librería, siempre debe hacerse referencia a ella.
- El método onReady llama a la función que se le pasa como parámetro en el momento en que la página carga todos los elementos html y cuando está lista para procesar código javascript. Es mejor que el evento onUpload porque no espera a que se carguen las imágenes. En ese método normalmente se crean los objetos que uno quiere que aparezca desde el inicio. En el ejemplo hemos puesto un alert que se ejecutará cuando se cargue la página
- Ahora crearemos un objeto Viewport por medio del método Viewport del objeto Ext. El objeto Viewport representa a la página, el contenedor principal y es allí donde pondremos todos los componentes. Modifique el código javascript para que se cree el objeto Viewport cuando se cargue la página.
<script type="text/javascript">
Ext.onReady(function() {
var viewport = new Ext.Viewport();
});
</script>
- Si ejecutamos la página, todavía no aparece nada. Pero ahora vamos a añadir un sector (llamémoslo así por ahora), para ello le pasamos una estructura como parámetro a la función que crea el Viewport. En dicha estructura se pasan las propiedades que va a tener el Viewport, por ahora sólo estableceremos una propiedad, que es 'items'. A este parámetro se le asigna los componentes hijos que va a tener el Viewport, que como hemos dicho va ha ser un sector.
<script type="text/javascript">
Ext.onReady(function() {
var viewport = new Ext.Viewport({
items:[{}]
});
});
</script>
- Hemos añadido un elemento sin propiedades, si ejecuta la página va a poder visualizar una línea en la parte superior. Éste es el sector que se acaba de añadir; la estructura que se la ha pasado como primer ítem '{}' ha sido interpretado como un elemento, en este caso, un sector, este sector puede contener al mismo tiempo otros componentes hijos. Ahora vamos a ver que otras propiedades que tiene el sector.
<script type="text/javascript">
Ext.onReady(function() {
var viewport = new Ext.Viewport({
items:[{
title:'Item 1',
html:'wtf',
width:600,
height:200,
}]
});
});
</script>
- Vamos a agregar otro sector al Viewport
<script type="text/javascript">Se vería algo así (hacer click sobre la imagen para ampliarla):
Ext.onReady(function() {
var viewport = new Ext.Viewport({
items:[{
title:'Item 1',
html:'wtf',
width:600,
height:200,
},{
html:'Hola',
html:width:300,
html:height:100
}]
});
});
</script>
8 comentarios:
Excelente y didáctico material. No he encontrado un casi dos meses ningún material con esta calidad. Me ha ayudado muchísimo a entender las bases de ExtJs.
Espero realmente que se active nuevamente este blog, hace falta este tipo de material en español.
Gracias César.
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools
Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton
of engaging advice and insight into front-end technologies. Even more obvious is his passion
for open source contribution and trial-and-error development, making his blog one of the
most honest and engaging around.
Website: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
Website: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
Website: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
Website: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
Website: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
Website: davidwalsh.name
David Walsh is Mozilla’s senior web developer, and the core developer for the MooTools Javascript Framework. David’s blog reflects his skills in HTML/5, JS and CSS, and offers a ton of engaging advice and insight into front-end technologies. Even more obvious is his passion for open source contribution and trial-and-error development, making his blog one of the most honest and engaging around.
Website: davidwalsh.name
Publicar un comentario