Curso de Ext JS

CAP.1. Conceptos fundamentales

................................................................................. 3
1.1 DOM................................................................................................................... 3
1.2 DHTML.............................................................................................................. 4
1.3 CSS.....................................................................................................................
4
1.4 JavaScript............................................................................................................
4
1.5 AJAX.................................................................................................................. 5
1.5.1 El objeto XMLHttpRequest .......................................................................... 6
1.6 XML ................................................................................................................... 7
1.7 RIA .....................................................................................................................
8
1.8 JSON...................................................................................................................
9
1.9 jQuery .................................................................................................................
9
1.10 Prototype.........................................................................................................
10
CAP.2. Introduccin a ExtJS.......................................................................................
11
2.1 Un poco de historia ...........................................................................................
11
2.2 Qu es exactamente ExtJS?..............................................................................
11
2.3 ExtJS es asncrono.............................................................................................
11
CAP.3. Empezando a usar
ExtJS................................................................................. 12
3.1 Descargando la librera ExtJS............................................................................
12
3.2 Dnde y cmo instalarlo? ................................................................................
12
3.3 Documentacin ExtJS .......................................................................................
12
3.4 Construyendo el proyecto ..................................................................................
12
3.4.1 La primera librera con ExtJS ..................................................................... 13
3.5 Spacer image.....................................................................................................
14
3.6 Probemos los idiomas........................................................................................
14
3.7 Algo un poco ms complicado...........................................................................
15

3.8 JSON y el objeto de configuracin ....................................................................

16
3.8.1 La manera antigua ...................................................................................... 16
3.8.2 La nueva forma de configurar objetos......................................................... 16
3.8.3 Qu es el objeto de configuracin?............................................................ 17
3.8.4 Como funciona JSON ................................................................................. 18
3.9 Modificando el ejemplo anterior........................................................................
18
3.9.1 Encendiendo el fuego ................................................................................. 19
CAP.4. Panels y TabPanels
......................................................................................... 21
4.1 Panel .................................................................................................................
21
4.1.1 Elaboracin de Panels................................................................................. 21
4.2 TabPanel ...........................................................................................................
21
4.2.1 Construyendo nuestro primer TabPanel ...................................................... 21
4.2.2 Manejo de Tabs, mtodos que debes conocer..............................................
22
CAP.5. Viewports, layouts y regions...........................................................................
23
5.1. Viewports.........................................................................................................
23
5.2 Layouts .............................................................................................................
23
5.2.1 FitLayout.................................................................................................... 23
5.2.2 BorderLayout ............................................................................................. 23
5.2.3 Accordion................................................................................................... 25
5.2.4 CardLayout................................................................................................. 26
5.2.5 TableLayout ............................................................................................... 27
5.2.6 AnchorLayout............................................................................................. 28
CAP.6. Ventanas y
dilogos........................................................................................ 30
6.1 El ayer y el hoy con ventanas ............................................................................
30
6.2 Dilogos............................................................................................................
30
6.2.1 Alert ........................................................................................................... 30
6.2.2 Prompt........................................................................................................ 31
6.2.3 Confirmation .............................................................................................. 32
6.2.4 Progress...................................................................................................... 32
6.2.5 Show .......................................................................................................... 33
6.2.6 Comportamiento general de Show .............................................................. 34
6.3 Ventanas ...........................................................................................................
35
6.3.1 Empezando................................................................................................. 35
6.3.2 Un panel con potencia ................................................................................ 36

6.3.3 Layout ........................................................................................................ 36

6.3.4 Limpiando ventanas.................................................................................... 37
6.3.5 Los extras................................................................................................... 38
6.3.6 Funcionando dentro de un escritorio ........................................................... 38
6.3.7 Otras opciones ............................................................................................ 38
6.3.8 Manipulacin.............................................................................................. 39
6.3.9 Eventos....................................................................................................... 40
CAP.7. Toolbars, Botones y
Mens............................................................................. 41
7.1 Creacin de barras.............................................................................................
41
7.1.1 Toolbars ..................................................................................................... 41
7.1.2 Botn.......................................................................................................... 41
7.1.3 Men .......................................................................................................... 42
7.1.4 Botn split .................................................................................................. 43
7.1.5 Alineacin, divisores y espacios ................................................................. 43
7.1.6 Accesos directos ......................................................................................... 43
7.1.7 Botones de iconos....................................................................................... 44
7.1.8 Manejadores de botones.............................................................................. 44
7.1.9 Cargar contenido con el clic de un botn .................................................... 45
Referencia bibliogrfica
.............................................................................................. 46
Referencias de
Internet................................................................................................ 47

CAP.1. Conceptos fundamentales

1.1 DOM
El DOM Document Object Model, es una plataforma neutral que permite a los programas y
scripts acceder y actualizar dinmicamente el contenido, la estructura y el estilo de los
documentos. Esta estructura de objetos es generada por el navegador cuando se carga un
documento.
Desde el punto de vista del desarrollo de pginas web, el DOM nos indica cul es la naturaleza
de la estructura de los documentos y nos provee de una serie de recursos para poder acceder
a todos sus elementos, a la relacin que existe entre ellos, a sus caractersticas, sus modos de
representacin y los eventos que soportan.
El DOM tiene varios elementos, cada uno se encuentra dentro de una jerarqua, tanto HTML
como XML tienen como base una estructura dentro de la cual se definen los nodos que pueden
ser de informacin en el caso del XML y de objetos en el caso de HTML.
Estructura HTML:
Relacin entre nodos:
Ejemplo: En el caso de un input, se puede acceder a sus propiedades o caractersticas
navegando por su jerarqua, a partir de document > forms[0]:
<input type="text" name="caja" />
Para acceder al valor del input:
document.forms[0].caja.value

1.2 DHTML
El HTML Dinmico (DHTML), no es ms que una forma de aportar interactividad a las pginas
web, que tiene la ventaja de poder crear efectos que requieren poco ancho de banda a la hora
de ejecutarse y son estos efectos los que aumentan la funcionalidad a la pgina, que con solo
HTML simple sera imposible de realizar. Aunque muchas de las caractersticas del DHTML se
podran duplicar con otras herramientas como Java o Flash, el DHTML ofrece la ventaja de que

no requiere ningn tipo de plugin

para poder utilizarlo.
Aunque las tecnologas en las que se basa el DHTML (HTML, CSS, JavaScript) estn
estandarizadas, la forma en que se implementan en los varios navegadores, difiere entre s.
Por este motivo, la creacin de pginas web que usen esta tecnologa, puede llegar a
convertirse en una tarea muy compleja, puesto que hay que conseguir que la pgina se
visualice perfectamente en todos los navegadores.

1.3 CSS
Es un mecanismo simple para aadir estilos (fonts, colors, spacing) a los documentos Web.
La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un
documento de su presentacin.
Ejemplo:
position : absolute
left : 50px
top : 100px
width : 200px
height : 100px
clip : rect(0px 200px 100px 0px)
visiblity : visible
zindex
: 1
backgroundcolor
: #FF0000
layerbackgroundcolor
: #FF0000
backgroundimage
: URL(icono.gif)
layerbackgroundimage
: URL(icono.gif)

1.4 JavaScript
JavaScript es un lenguaje de programacin interpretado (scripting), es decir, que no requiere
compilacin, utilizado principalmente en pginas web, con una sintaxis semejante a la del
lenguaje Java.
No es un lenguaje de Programacin Orientada a Objetos propiamente dicho como Java, pero
gracias a que es basado en prototipos, se puede aplicar conceptos de programacin orientada
a objetos.
Ejemplo:
<script type="text/javascript">
function fEnviaAlerta()
{
var texto = document.forms[0].caja.value
alert(texto)
}
</script>

1.5 AJAX
Ajax, acrnimo de Asynchronous JavaScript And XML (JavaScript asncrono y XML), es una
tcnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet
Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los
usuarios mientras se mantiene la comunicacin asncrona con el servidor en segundo plano.
De esta forma es posible realizar cambios sobre las pginas sin necesidad de recargarlas, lo
que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.
Ajax es una tecnologa asncrona, en el sentido de que los datos adicionales se requieren al
servidor y se cargan en segundo plano sin interferir con la visualizacin ni el comportamiento
de la pgina. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente
se efectan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza
mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso,
no es necesario que el contenido asncrono est formateado en XML.
Ajax es una tcnica vlida para mltiples plataformas y utilizable en muchos sistemas
operativos y navegadores dado que est basado en estndares abiertos como JavaScript y
Document Object Model (DOM).

La conversacin tradicional entre el cliente y el servidor es en serie, se carga una sola pgina a
la vez, como se explica en la siguiente imagen:
La interaccin AJAX entre el cliente y el servidor es asncrona, es decir dentro de la misma
pgina se realiza la solicitud y entrega de respuesta, gracias al objeto XMLHttpRequest, como
se muestra en la siguiente imagen:
El proceso de una aplicacin AJAX ser vera de la siguiente forma, como muestra la imagen:

1.5.1 El objeto XMLHttpRequest

Su objetivo es hacer peticiones asncronas al servidor, es la columna vertebral de todas las
aplicaciones AJAX. Est admitido por todos los navegadores. Microsoft lo introdujo en IE 5
como un objeto ActiveX.
Propiedades:
Propiedades Descripcin
onreadystatechange Determina que funcin ser llamada cuando la propiedad readyState del
objeto cambie.
Nmero entero que indica el status de la peticin:
0 = No iniciada
1 = Cargando
2 = Cargado
3 = Interactivo
readyState
4 = Completado
responseText Datos devueltos por el servidor en forma de string de texto
responseXML Datos devueltos por el servidor expresados como un objeto documento.
Cdigo estatus HTTP devuelto poro el servidor:
200 = OK (Peticin correcta)
204 = No Content (Documento sin datos)
301 = Moved Permanently (Recurso Movido)
401 = Not Authorized (Necesita autenticacin)
403 = Forbidden (Rechazada por servidor)
404 = Not Found (No existe en servidor)
408 = Request Timeout (Tiempo sobrepasado)
status
500 = Server Error (Error en el servidor)
Mtodos:
Propiedades Descripcin
abort() Detiene la peticin actual.
getAllResponseHeaders() Devuelve todas las cabeceras como un string.
getResponseHeader(x) Devuelve el valor de la cabecera x como un string.
open(method, URL, a ) Especifica el mtodo HTTP (por ejemplo, GET o POST), la
URL objetivo, y si la peticin debe ser manejada
asncronamente (Si, a=True defecto No, a=false.)
send(content) Enva la peticin
setRequestHeader( label , value ) Configura un par parmetro y valor label=value y lo asigna
a la cabecera para ser enviado con la peticin.

1.6 XML
XML, siglas en ingls de eXtensible Markup Language (lenguaje de marcas extensible), es un
metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C).
Es una simplificacin y adaptacin del SGML y permite definir la gramtica de lenguajes
especficos (de la misma manera que HTML es a su vez un lenguaje definido por SGML). Por
lo tanto XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes
para diferentes necesidades. Algunos de estos lenguajes que usan XML para su definicin son
XHTML, SVG, MathML.
XML no ha nacido slo para su aplicacin en Internet, sino que se propone como un estndar
para el intercambio de informacin estructurada entre diferentes plataformas. Se puede usar en
bases de datos, editores de texto, hojas de clculo y casi cualquier cosa imaginable.

XML es una tecnologa sencilla que tiene a su alrededor otras que la complementan y la hacen
mucho ms grande y con unas posibilidades mucho mayores. Tiene un papel muy importante
en la actualidad ya que permite la compatibilidad entre sistemas para compartir la informacin
de una manera segura, fiable y fcil.
Ejemplo:
<?xml version='1.0' encoding='iso88591'?>
<datos>
<total>
125
</total>
<dato>
<codigo>
<![CDATA[77]]>
</codigo>
<nombre>
<![CDATA[Aguas Termales Baos Entrada general.]]>
</nombre>
<datos_insumo>
<![CDATA[ | Tipo: Entradas | Proveedores: Municipio de Baos ]]>
</datos_insumo>
</dato>
<dato>
<codigo>
<![CDATA[78]]>
</codigo>
<nombre>
<![CDATA[Aguas Termales Papallacta Entrada general]]>
</nombre>
<datos_insumo>
<![CDATA[ | Tipo: Entradas | Proveedores: Termas de Papallacta ]]>
</datos_insumo>
</dato>
</datos>

1.7 RIA
Son aplicaciones web que tienen la mayora de las caractersticas de las aplicaciones de
escritorio tradicionales, estas aplicaciones utilizan un navegador web estandarizado para
ejecutarse y por medio de un plugin o independientemente con una virtual machine, se
agregan las caractersticas adicionales.
Esta surge como una combinacin de las ventajas que ofrecen las aplicaciones Web y las
aplicaciones tradicionales. Buscan mejorar la experiencia del usuario.
Normalmente en las aplicaciones Web, hay una recarga continua de pginas cada vez que el
usuario pulsa sobre un enlace. De esta forma se produce un trfico muy alto entre el cliente y el
servidor, llegando muchas veces, a recargar la misma pgina con un mnimo cambio.
En los entornos RIA, en cambio, no se producen recargas de pgina, ya que desde el principio
se carga toda la aplicacin, y slo se produce comunicacin con el servidor cuando se
necesitan datos externos como datos de una Base de Datos o de otros ficheros externos.
Ejemplo: Un ejemplo muy bueno de RIA es el desktop creado por el ExtJS team que utiliza un
men muy parecido al del sistema operativo Windows, tiene conos en el escritorio y despliega
ventanas que se pueden mover, cerrar y cambiar de tamao.

1.8 JSON
JSON, acrnimo de JavaScript Object Notation, es un formato ligero para el intercambio de
datos. JSON es un subconjunto de la notacin literal de objetos de JavaScript que no requiere
el uso de XML.
La simplicidad de JSON ha dado lugar a la generalizacin de su uso, especialmente como
alternativa a XML en AJAX. Una de las supuestas ventajas de JSON sobre XML como formato
de intercambio de datos en este contexto es que es mucho ms sencillo escribir un analizador
semntico de JSON. En JavaScript, un texto JSON se puede analizar fcilmente usando el
procedimiento eval(), lo cual ha sido fundamental para que JSON haya sido aceptado por parte
de la comunidad de desarrolladores AJAX, debido a la ubicuidad de JavaScript en casi
cualquier navegador web.
Ejemplo:

(
{
"total": "2",
"results": [
{
"id_genero": "F",
"descripcion_genero": "Femenino"
},
{
"id_genero": "M",
"descripcion_genero": "Masculino"
}]
})

1.9 jQuery
jQuery es una biblioteca o framework de JavaScript, creada inicialmente por John Resig, que
permite simplificar la manera de interactuar con los documentos HTML, manipular el rbol
DOM, manejar eventos, desarrollar animaciones y agregar interaccin con la tecnologa AJAX
a pginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC.
jQuery es software libre y de cdigo abierto, posee un doble licenciamiento bajo la Licencia MIT
y la Licencia Pblica General de GNU v2,1 permitiendo su uso en proyectos libres y privativos.2
jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en
JavaScript que de otra manera requeriran de mucho ms cdigo, es decir, con las funciones
propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.
Ejemplo:
<script type="text/javascript">
jQuery().ready(function (){
jQuery("#list1").jqGrid({
url:'server.php?q=1',
datatype: "xml",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:75},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
autowidth: true,
rowList:[10,20,30],
pager: jQuery('#pager1'),
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"XML Example"
}).navGrid('#pager1',{edit:false,add:false,del:false})
</script>

1.10 Prototype
Prototype es un framework escrito en JavaScript que se orienta al desarrollo sencillo y
dinmico de aplicaciones web. Es una herramienta que implementa las tcnicas AJAX y su
potencial es aprovechado al mximo cuando se desarrolla con Ruby On Rails.
Con la Web 2.0 las tcnicas de desarrollo de pginas web necesitaban dar un gran salto. Con
esto en mente naci la tcnica AJAX, que gracias a Prototype permite el desarrollo gil y
sencillo de pginas Web, esto en relacin al desarrollador, y provee al cliente una manera ms
rpida de acceder al servicio que solicita. Prototype es un Framework basado en JavasScript
orientado a proporcionar al desarrollador de tcnicas AJAX listas para ser usadas. El potencial
de Prototype es aprovechado al mximo si se desarrolla con Ruby On Rails, esto no quiere
decir que no se puede usar desde otro lenguaje, solamente que demandara un "mayor
esfuerzo" en el desarrollo.
Ejemplo:
var nombre = $F('nameUser')

var apellido = $F('surnameUser')

var direccion = $F('directionUser')
var param = 'name=' + nombre + '&surname=' + apellido + '&direction=' + direccion
var url = 'paginaReceptora.php'
var ajaxRequest = new Ajax.Request(url,
{
method: 'get',
parameters: param,
asynchronous: true,
onComplete: showResponse
})

CAP.2. Introduccin a ExtJS

2.1 Un poco de historia
ExtJS fue originalmente construida como una extensin de la biblioteca YUI, en la actualidad
puede usarse como extensin para las bibliotecas jQuery y Prototype. Desde la versin 1.1
puede ejecutarse como una aplicacin independiente.

2.2 Qu es exactamente ExtJS?

ExtJS es una biblioteca o conjunto de libreras de JavaScript para el desarrollo de aplicaciones
web interactivas, usa tecnologas AJAX, DHTML y DOM.
ExtJS permite realizar completas interfaces de usuario, fciles de usar, muy parecidas a las
conocidas aplicaciones de escritorio. Esto permite a los desarrolladores web concentrarse en la
funcionalidad de las aplicaciones en vez de en las advertencias tcnicas.

2.3 ExtJS es asncrono

La programacin tradicional para Internet, o tambin llamada Web 1.0 ejecuta el cdigo en
sucesin, es decir espera a que una lnea de cdigo se complete antes de ejecutar la siguiente.
Al igual que la construccin de una casa, los cimientos deben ser completados antes de que
las paredes se puedan construir, a continuacin, las paredes deben estar completas antes de
que el techo sea construido.
Con ExtJS, que es una herramienta tipo Web 2.0, podemos fcilmente empezar por el techo de
la casa antes que los cimientos estn construidos. Es algo as como imaginarse que el techo
de la casa est siendo construido en una fbrica, mientras al mismo tiempo, se estn
construyendo los cimientos y las paredes y cuando todo est listo, simplemente se arma todo
ms rpido.
Esto nos presenta otras cosas que antes no solamos tener, ahora ya no estamos obligados a
tomar el enfoque lnea por lnea del desarrollo web.
ExtJS nos ayuda a salir por medio de eventos y manejadores que podemos pegar a nuestra
funcionalidad.
Esta manera de hacer las cosas se denomina asincrona.

CAP.3. Empezando a usar ExtJS

3.1 Descargando la librera ExtJS
Se
debe ingresar al sitio www.sencha.com.
Escoger
el framework ExtJS.
Hacer
clic en el botn Download de color verde.
Y
para el curso vamos a bajar la versin Open Source haciendo clic en el botn
Download de color celeste.

3.2 Dnde y cmo instalarlo?

El paquete ExtJS, no se instala, ya que es un SDK que contiene un conjunto de archivos que
comprenden los recursos que ExtJS necesita para correr adecuadamente. Viene dentro de un
archivo comprimido, el mismo que vamos a descomprimir dentro de la carpeta principal de
nuestro servidor de pginas dinmicas favorito, en este caso lo haremos dentro de
Apache>htdocs>aplicacin, una vez copiado el directorio que contiene las libreras de ExtJS,

cambiemos el nombre de la carpeta a extjs simplemente.

El SDK se compone de las siguientes carpetas y archivos importantes:
Tipo Nombre Descripcin
Directorio adapter Archivos que permiten usar otras libreras dentro de ExtJS
Directorio docs La documentacin completa de todos los componentes de
ExtJS (solo corre en un servidor web)
Directorio examples Cientos de asombrosos y tiles ejemplos
Directorio pkgs
Paquetes adicionales a los componentes originales que los
hacen ms fuertes, incluye tambin algunos nuevos
objetos
Directorio resources Dependencias de las libreras de ExtJS, tales como
archivos CSS e imgenes
Directorio src El cdigo fuente complete de ExtJS
Archivo extall.
css Es el archivo CSS principal de ExtJS, es el encargado de
que los componentes se vean tan bien
Archivo extall.
js Es la libera primaria de ExtJS

3.3 Documentacin ExtJS

Dentro del paquete de libreras ExtJS, viene incluida la documentacin, a la cual podremos
acceder desde cualquier explorador web colocando la siguiente direccin local:
http://localhost/aplicacion/extjs/docs/
As la tendremos a mano por cualquier duda que se presente.
Ejercicio: Explorar documentacin

3.4 Construyendo el proyecto

Dentro de la carpeta creada en htdocs, aplicacion, vamos a crear las siguientes carpetas para
organizar mejor nuestro proyecto:
imagenes
librerias
estilos
Finalmente vamos a crear un archivo en la raz de nuestra carpeta aplicacion, denominado
index.html, dentro del cual vamos a llamar a las libreras que son necesarias para que incluir
ExtJS en el proyecto:
<html>
<head>
<title>Aplicacion</title>
<!Ext
Css's >
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/extall.
css"/>
<!Ext
JS's >
<script type="text/javascript" src="ExtJS/adapter/ext/extbase.
js"></script>
<script type="text/javascript" src="ExtJS/extall.
js"></script>
<!Mis
JS's >
Espacio para colocar nuestras propias libreras
</head>
<body>
</body>
</html>

3.4.1 La primera librera con ExtJS

Dentro de la carpeta librerias colocada dentro de nuestra aplicacin, vamos a crear un archivo
denominado hola1.js, con el siguiente contenido:
Ext.onReady(function()
{
Ext.Msg.alert('Saludo', 'Hola mundo!!!')
})
Llamamos a la librera hola1.js dentro de index.html, en el espacio que habamos reservado

para colocar nuestras propias libreras.

Ingresamos a nuestra aplicacin por medio de la siguiente direccin:
http://localhost/aplicacion/
Y esto es lo que aparece:
Analizando el ejemplo actual tenemos lo siguiente:
Ext.
onReady: Esta funcin hace que nuestro cdigo espere antes de que el DOM est
disponible. Esto se necesita porque el JavaScript empieza ejecutando tan pronto como
es encontrado en el documento, momento en el cual nuestros elementos DOM podran
no existir.
Ext.
Msg: Esta es la funcin principal usada para la creacin de una alerta, ya que se
ocupa de todo lo necesario para tener un cuadro de dilogo completo.

3.5 Spacer image

Antes de continuar, debemos proveer a ExtJS con algo que necesita, una imagen, que se ha
denominado spacer image, debido a que ExtJS necesita tener la medida de un pxel por un
pixel transparente, para dar un ancho fijo a sus componentes. Se debe indicar la locacin de
esta imagen usando la siguiente lnea:
Ext.BLANK_IMAGE_URL = 'images/s.gif'
Siempre se coloca como primera lnea dentro del evento onReady.
La idea de utilizar una spacer image, es porque la interface de usuario de ExtJS es creada
usando CSS, pero el CSS necesita elementos HTML fundamentales para crear el estilo que les
da la apariencia actual a los componentes de ExtJS. El nico elemento HTML que tiene un
tamao exacto y previsible en todos los navegadores en una imagen. As que esta imagen es
usada para definir la forma como los componentes son dibujados. Es as como ExtJS mantiene
la compatibilidad con la mayora de navegadores web.
Ejercicio: Aadir spacer image al ejemplo anterior.

3.6 Probemos los idiomas

ExJS es multiidioma,
el idioma por default es ingls, para cambiarlo solo necesitamos aadir la
librera correspondiente al idioma deseado, es as que para espaol usaremos:
<!Librera
del idioma espaol>
<script type="text/javascript" src="ExtJS/src/locale/extlanges.
js"></script>

Esta declaracin debe colocarse antes de las libreras propias.

Ejercicio: Colocar la librera en el index.html y correr el ejemplo con la librera y sin la librera
para ver que sucede.

3.7 Algo un poco ms complicado

Vamos a crear un ejemplo ms complicado, utilizando otros elementos de Ext.Msg, para lo cul
creamos un archivo denominado pregunta.js en el directorio de nuestras librerias, con el
siguiente cdigo:
Ext.onReady(function()
{
Ext.BLANK_IMAGE_URL = 'images/s.gif'
Ext.Msg.show(
{
title: 'Javier',
msg: 'Has visto mi computadora?',
buttons:
{
yes: true,
no: true,
cancel: true
}
})
})

Con este cdigo creamos un cuadro de dilogo con un ttulo definido y cuyo mensaje principal

es una pregunta, adems le colocamos tres botones como opciones de respuesta.

El argumento pasado a onReady es una funcin, que puede ser pasada con un nombre
definido, o creada en lnea como en este caso. Este mtodo de crear una funcin en lnea se
denomina como una funcin annima, que es usada para llamar una funcin particular solo una
vez.
Si estuviramos usando una funcin que pueda ser reultizada, entonces deberamos definirla
de esta forma:
function fDondeEsta()
{
Ext.Msg.show(
{
title: 'Javier',
msg: 'Has visto mi computadora?',
buttons:
{
yes: true,
no: true,
cancel: true
}
})
}
Ext.onReady(function()
{
Ext.BLANK_IMAGE_URL = 'images/s.gif'
fDondeEsta()
})

Si estamos pensando realizar una aplicacin grande, es buena idea hacer funciones
reutilizables.
Tambin se pueden hacer cambios en la configuracin de los componentes, colocando estilos
propios. Y es posible incluir una funcin para que se ejecute al hacer clic en los botones del
cuadro de dilogo, de la siguiente forma:
1. Se debe crear un archivo de estilos, denominado estilos.css en la carpeta estilos del
proyecto.
2. Colocar en el archivo un estilo propio como el siguiente:
.personaicon
{
background: url(../imagenes/ico_persona_flecha.gif) norepeat
}

3. Colocar el estilo creado en la propiedad icon del cuadro de digolo:

icon: 'personaicon',

4. Crear una funcin annima asociada a la propiedad fn del cuadro de dilogo, esta
funcin hara que aparezca una alerta indicando cual fue el botn que presion el
usuario:
fn: function(btn)
{
Ext.Msg.alert('Javier hizo clic en', btn)
}

3.8 JSON y el objeto de configuracin

En nuestros ejemplos, hemos usado algo que se denomina objeto de configuracin, que es la
forma principal de hacer que ExtJS haga lo que nosotros queremos. Esto permite realizar la
configuracin de las diferentes opciones que estn disponibles para cualquier funcin que est
siendo usada.

3.8.1 La manera antigua

Antes solamos llamar a las funciones con un set de argumentos predeterminados. Es decir
que debamos recordar el orden de los argumentos cada vez que la funcin sea usada.
var prueba = new FuncionPrueba('tres','argumentos','usados')

Esta manera antigua de crear las funciones puede dar muchos problemas:
Requiere
que recordemos el orden de los argumentos
No
describe lo que cada argumento representa

Ofrece
menos flexibilidad para aumentar argumentos adicionales

3.8.2 La nueva forma de configurar objetos

Usando el objeto de configuracin, tenemos un alto nivel de flexibilidad, y se puede decir que
nuestras variables estn en un plano descriptivo. El orden de los argumentos no importa ms,
ya que el primero puede ser el ltimo o estar en medio. Con el mtodo del objeto de
configuracin de pasar argumentos a sus funciones, los argumentos no necesarios puede ser
obviados de la declaracin.
var prueba = new FuncionPrueba(
{
primeraPalabra: 'tres',
segundaPalabra: 'argumentos',
terceraPalabra: 'usados'
})

Este mtodo tambin permite una expansin ilimitada de los argumentos de nuestras
funciones. Usando pocos o aadiendo ms argumentos. Otra gran ventaja de usar el objeto de
configuracin es que el uso previo de las funciones no se ver afectado por el aumento o
disminucin de los argumentos en un uso posterior.
var prueba = new FuncionPrueba(
{
segundaPalabra: 'argumentos'
})
var prueba = new FuncionPrueba(
{
segundaPalabra: 'argumentos',
cuartaPalabra: 'wow'
})

3.8.3 Qu es el objeto de configuracin?

Si se est familiarizado con CSS o JSON, se puede notar que el objeto de configuracin luce
similar a cualquier de estos dos, sobretodo porque es lo mismo. El objeto de configuracin es
solo una forma de estructurar datos que puede ser fcilmente interpretada por los lenguajes de
programacin, en este caso JavaScript.
Por ejemplo, veamos la porcin de la configuracin del nuestro ejemplo:
{
title: 'Javier',
msg: 'Has visto mi computadora?',
buttons:
{
yes: true,
no: true,
cancel: true
},
icon: 'personaicon',
fn: function(btn)
{
Ext.Msg.alert('Javier hizo clic en', btn)
}
}

La configuracin particular que estamos usando aqu podra parecer completa a primer vista,
pero una vez que la conocemos, se convierte en una forma extremadamente fcil de configurar
componentes. Casi todos los componenes de ExtJS utilizan el objeto de configuracin, as que
es algo que se nos tiene que volver familiar. El objeto de configuracin se volver nuestro
mejor amigo.
Aqu se detallan algunos puntos importantes que hay que recordar cuando se trabaja con el
objeto de configuracin:
Se
deben colocar llaves para identificar el conjunto de registros, que simboliza los
registros dentro de los corchetes como parte de un objeto > {registros} .
Cada
registro se compone de un par nombre/valor, separados por dos puntos, y
separados por comas entre ellos > {nombre0:valor0, nombre1:valuor1} .

Los
valores del registro puente ser de cualquier tipo de dato, incluyendo bolean, array,
function, o cualquier otro objeto > {nombre0: true, nombre1:{nombre2:valor2}}.
Los
corchetes definen un arreglo > {nombre:[uno,dos,tres]} . Un arreglo puede
tambin contener objetos con registros, valores o cualquier nmero de otras cosas.
La mayor ventaja de usar JSON para configurar nuestros componentes, es que si nosotros
necesitamos ms opciones, podemos empezar digitndolas y listo. Contrario a la tpica llamada
a una funcin, el orden de nuestras opciones de configuracin llega a ser irrelevante, y puede
haber pocos o tantos argumentos como sean necesarios.

3.8.4 Como funciona JSON

Todo se basa en la funcin eval , que es la que JavaScript usa para interpretar una cadena
JSON, y convertirla en objetos, arrays y funciones que pueden ser usadas.

3.9 Modificando el ejemplo anterior

Vamos a abrir nuestro ejemplo pregunta.js y vamos a grabar como pregunta2.js y vamos a
aadirle funcionalidad a cada botn de diferente manera:
fn: function(btn)
{
switch (btn)
{
case 'yes':
Ext.Msg.prompt('Javier', 'Dnde est?')
break
case 'no':
Ext.Msg.alert('Javier', 'Voy a quemar el edificio ahora!')
break
case 'cancel':
Ext.Msg.wait('Grabando al disco', 'Copia de archivos')
break
}
}

En este ejemplo vemos los diferentes elementos de Ext.Msg,

Cuando se da clic en el botn Si, se despliega un dilogo tipo prompt que permite ingresar un
solo valor y es un elemento estndar en casi todas las interfaces de usuario.
Cuando se de clic en No se despliega una alerta, parecida a la alerta estndar del JavaScript
pero con esteroides.
Al hacer clic en el botn Cancelar (o presionar la tecla Escape) se despliega un mensaje de
espera usando una barra de progreso.
La barra de progreso que estamos usando puede ser controlada y desaparecer cuando el
proceso se haya culminado. Para este ejemplo se queda ejecutando sin fin.

3.9.1 Encendiendo el fuego

Ahora, vamos a empezar causando algunas reacciones en nuestra pgina, basndonos en las
respuestas de los usuarios a los dilogos. Dentro de nuestra sentencia switch, para el botn
Si colocaremos un tercer argumento en la funcin prompt que se ejecutar cuando el botn
Aceptar sea presionado. Vamos a validar el texto introducido en el dilogo del prompt, si es
igual a en la oficina se presentar el texto No est ah, caso contrario se imprimir el texto
introducido.
Necesitamos colocar un DIV en el cuerpo de la pgina
<div id='my_id' style='width:100%height:100%overflow:hiddentextalign:
center'></div>

Y el siguiente cdigo en el case:

case 'yes':
Ext.Msg.prompt('Javier', 'Dnde est?', function(btn, txt)
{
if (txt.toLowerCase() == 'en la oficina')
{
Ext.get('my_id').dom.innerHTML = 'Mal trabajo'
}
else
{

Ext.get('my_id').dom.innerHTML = txt
}
Ext.DomHelper.applyStyles('my_id',
{
background: 'transparent url(imagenes/computadora.gif) 50% 50% norepeat'
})
})
break

Para el caso del No, se desplegar una alerta, que tambin cambia el estilo del documento
cuando el botn es presionado.
case 'no':
Ext.Msg.alert('Javier', 'Voy a quemar el edificio ahora!', function()
{
Ext.DomHelper.applyStyles('my_id',
{
'background': 'transparent url(imagenes/fire.png) 0 100% repeatx'
})
Ext.DomHelper.applyStyles(Ext.getBody(),
{
'backgroundcolor':
'#FF0000'
})
Ext.getBody().highlight('FFCC00',
{
endColor: 'FF0000',
duration: 6
})
})
break

Analizando el ejemplo, podemos ver lo siguiente:

Podemos
enviar como parmetro una funcin
Adems
vemos la utilizacin de varias sentencias como:
o Ext.get() > Este mtodo permite el acceso a cualquier elemento del documento
HTML colocando como parmetro su ID y permite manipularlo, como hemos visto
en el ejemplo.
o Ext.DomHelper > Esta clase proporciona una capa de abstraccin de DOM y
apoya de manera transparente a travs de la creacin de elementos DOM o
utilizando fragmentos de HTML. Tambin tiene la habilidad de crear plantillas de
fragmentos HTML, a partir de la construccin de su DOM.
o Ext.getBody() > Retorna el body actual como un elemento de ExtJS.

CAP.4. Panels y TabPanels

4.1 Panel
El Panel es un contenedor que tiene una funcionalidad especfica y componentes estructurales
que lo hacen el perfecto bloque de construccin para aplicaciones orientadas a interfaces de
usuario.

4.1.1 Elaboracin de Panels

Todos los componentes de ExtJS tienen su declaracin, sus mtodos y propiedades, para cuya
definicin se utiliza el objeto de configuracin antes revisado, en el caso del Panel se configura
de la siguiente manera:
1. Creamos en la carpeta librerias de nuestro proyecto un archivo que se llame panel.js
2. Creamos el Panel directamente asignando el objeto a una variable usando la llamada
al mtodo creador Ext.Panel().
3. Al objeto creado le colocamos las siguientes propiedades:
a. Ttulo
b. Ancho
c. Alto
d. Y lo ms importante, donde va a ubicarse, para ello debemos usar la propiedad
applyTo,ya que este panel podr ser el contenedor de otros objetos, ms no

est contenido dentro de otro componente, si as fuera no necesitaramos esta

propiedad.
4. En el index.html llamamos en las libreras propias, solamente al archivo panel.js y
corremos nuestra aplicacin.
Ejercicio: Aadir ms propiedades.

4.2 TabPanel
Un TabPanel puede ser usado exactamente como un Panel estndar para propsitos de
diseo, con la ventaja adicional de que posee no solo un panel, si no varios manejados por
pestaas separadas, estas pestaas pueden colocarse tanto arriba como abajo del panel.

4.2.1 Construyendo nuestro primer TabPanel

Para construir nuestro primer TabPanel, vamos a crearlo dentro del Panel que creamos con
anterioridad y de otra forma de las que hemos observado hasta ahora, para crear un
componente de ExtJS dentro de otro, lo podemos hacer de dos formas:
1. Asignando el objeto o componente a una variable y colocando esta variable como item o
componente de otro, como ya hemos visto.
2. Realizando una creacin interna sin asignar a una variable y para hacer referencia a
este objeto en cualquier otro lugar usaremos su ID.
Para ello vamos a usar el ejemplo que ya tenamos de la creacin del Panel y seguir los
siguientes pasos:
1. Lo vamos a renombrar como tab_panel.js.
2. Colocamos el TabPanel como item del panel.
3. Cambiamos la librera llamada en el index.html y corremos la aplicacin.
La propiedad de configuracin items , es un array de objetos que define cada uno de los tabs
contenidos en este TabPanel. El ttulo es la nica opcin que obligadamente necesita ser
colocada para visualizar correctamente cada tab.
Tambin necesitamos colocar un tab activo con la propiedad activeTab, que es cero para
nuestro TabPanel. Este es el ndice de los tabs en el panel, de izquierda a derecha empezando
a contar desde cero. Esto le indica al TabPanel que el tab de la posicin cero debe hacerse
activo por defecto, de lo contrario, resultara en un panel en blanco hasta que el usuario haga
clic en una pestaa.
Ejercicio: Colocar las siguientes propiedades de configuracin al TabPanel y ver que sucede:
closable
disabled
tabPosition

4.2.2 Manejo de Tabs, mtodos que debes conocer

Tenemos algunos mtodos especiales para el manejo de tabs, que son:
add(
array objeto de configuracin ): Aade dinmicamente un tab al contenedor, como
parmetro se coloca el objeto de configuracin deseado para el nuevo elemento.
setActiveTab(
String/Number item ): Coloca un tab especfico como activo, para ello hay
que enviar como parmetro el ndice del elemento deseado.
getActiveTab():
Retorna el tab activo actual.
show():
Muestra fsicamente en el contenedor, un elemento recin aadido o que se
encuentre oculto.
hide():
Oculta solamente la pestaa del tab, no el cuerpo, para ello hay que utilizar el
mtodo hideTabStripItem. Es muy til para cuando se coloca la caracterstica closable:
true, debido a que cuando se cierra una pestaa el objeto se autodestruye, si se vuelve
a necesitar el tab hay que volver a crearlo y esto es un poco ms pesado, por lo que se
debe programar el evento beforemove y hacer que solo se oculte, no se autodestruya.
hideTabStripItem(
Number/String/Panel item ): Oculta el cuerpo de la pestaa.

Estos mtodos los veremos ejecutados junto con layouts y regions.

CAP.5. Viewports, layouts y regions

5.1. Viewports
El Viewport es un contenedor (se hereda de la clase Container ) que en s, tiene una estructura
igual que cualquier otro contenedor, pero tiene un lugar especial dentro de Ext JS. El Viewport
representa el total de la superficie visible para el usuario, lo que significa que es la ventana del
navegador en otras palabras (o para ser ms precisos, la porcin donde se ejecuta un sitio
web, tpicamente llamado ventana del navegador).
Cuando se crea un Viewport automticamente se coloca dentro del <body> del documento
cargado en el explorador y se acomoda para ocupar toda la ventana del navegador. Tambin
est al tanto de los eventos de cambio de tamao de la ventana del explorador que puedan
ocurrir y reacciona apropiadamente. Por esta razn, solo puede existir un Viewport por pgina.
El Viewport est dotado con una estructura especfica de diseo, puede ser BorderLayout,
CardLayout o lo que sea, por ejemplo:
new Ext.Viewport(
{
layout: "fit",
items: [
{
title: "Ventana del navegador",
bodyStyle: "backgroundcolor:#
999999",
html: "Algn contenido"
}]
})

5.2 Layouts
Un layout transforma cualquier contenedor en una verdadera aplicacin web. Los estilos ms
ampliamente usados pueden ser encontrados en sistemas operativos como Microsoft Windows,
que utiliza borders layouts, regiones de tamao variable, acordeones, tabs y casi todo lo que se
pueda imaginar.
Para mantener apariencia consistente en todos los navegadores, y para proveer caractersticas
comunes de interfaces de usuario, Ext JS tiene un poderoso sistema de manejo de layouts.
Cada seccin puede ser manejada y puede ser movida o escondida, y pueden aparecer en un
clic, cuando y donde se necesite.

5.2.1 FitLayout
Un FitLayout contiene un solo elemento que automticamente se expande para llenar todo el
contenedor. Por lo general no se crea la instancia de esta clase, en la mayora de
contenedores se coloca el tipo de layout en la propiedad correspondiente.
Curiosamente, FitLayout no tiene sus propias propiedades de configuracin, adems de las
que hereda. Cuando se necesite tener un Panel que llene el contenedor entero, FitLayout debe
ser usado. Todo lo que se necesita es colocar el atributo layout en el contenedor para rellenar.

5.2.2 BorderLayout
Un BorderLayout es relativamente un layout muy simple que tambin es de uso muy comn,
talvez el ms popular. Ese es un layout que tiene cinco regiones:
una
a lo largo de toda la parte superior de la pgina,
otra
en el lado izquierdo,
otra
en el lado derecho,
otra
en la parte de abajo
y
otra entre todas las dems en el medio.
The BorderLayout soporta barras de separacin entre las regiones, permitiendo al usuario
cambiarlas de tamao. Tambin soporta secciones que se pueden tanto expandir como

colapsar. Tal como FitLayout, el BorderLayout en si mismo no tiene sus propias opciones de
configuracin.
Si bien hay cinco regiones disponibles en el BorderLayout, no es necesario que se usen todas.
Sin embargo, no se puede adicionar regiones despus de que se ha hecho el BorderLayout,
por eso hay que asegurarse de cuantas regiones se necesitan para configurarlas cuando se
crea el BorderLayout.
No se puede crear una instancia de Ext.layout.BorderLayout. En su lugar se debe configurar el
atributo layout de algun contenedor. Por ejemplo, creamos un Viewport, para desplegar los usos de
BorderLayout para organizar este contenedor:
var viewport = new Ext.Viewport(
{
layout: 'border',
renderTo: Ext.getBody(),
items: [
{
region: 'north',
xtype: 'panel',
html: 'Norte'
},
{
region: 'west',
xtype: 'panel',
split: true,
width: 200,
html: 'Oeste'
},
{
region: 'center',
xtype: 'panel',
html: 'Centro'
},
{
region: 'east',
xtype: 'panel',
split: true,
width: 200,
html: 'Este'
},
{
region: 'south',
xtype: 'panel',
html: 'Sur'
}]
})

Si todo sali bien, veremos algo como lo siguiente:

Ahora tenemos un layout con cinco regiones definidas. Estas regiones pueden contener otros
componentes, sin problemas. Como alternativa cada regin en si misma puede ser dividida en
ms regiones anidadas, por ejemplo la seccin del centro puede ser dividida horizontalmente
para tener su propia regin sur.
Ejercicio: Hacer que las regiones pueda cambiarse de tamao o se puedan contraer.

5.2.3 Accordion
El Accordion es en cierto modo su propio componente. En otras libreras realmente lo es, pero
en Ext JS es un tipo de layout (es literalmente una extensin de FitLayout). En pocas palabras,
un Accordion es una sola capa en la que se tienen diferentes paneles que pueden ser
seleccionados por el usuario. Estos paneles estn apilados verticalmente (aunque hay algunas
implementaciones que permiten hacerlo horizontalmente tambin) y usualmente incluye un
bonito efecto animado cuando se selecciona uno de ellos. Por ejemplo:
Un ejemplo que crea un Accordion puede ser:
var panel = new Ext.Panel(
{
title: 'Mi primer acorden',
layout: 'accordion',
height: 400,
collapsible: true,

layoutConfig:
{
animate: true
},
items: [
{
title: 'Panel 1',
html: 'Yo soy el Panel #1'
},
{
title: 'Pane 2',
html: 'Yo soy el Panel #2'
},
{
title: 'Pane 3',
html: 'Yo soy el Panel #3'
}]
})

Aqu se crea una instancia de Ext.Panel, con un layout tipo Accordion. Se especifica el alto y se
establece la propiedad collapsible: true, para que se puedan colapsar y se configura la
propiedad animate: true, comn para todos los paneles, que permite establecer un bonito
efecto el momento de seleccionar algn panel.

5.2.4 CardLayout
El CardLayout es un tipo de FitLayout con esteroides, ya que permite tener mltiples paneles
adaptados a los contenedores, pero solamente permite mostrar uno a la vez. Interfaces como
los wizards son tpicamente implementadas con CardLayout, as como las interfaces con
pestaas.
El mtodo ms importante expuesto por el CardLayout es setActiveItem (). Este permite
mostrar un nuevo panel en el CardLayout ya sea por su cdigo por el valor del ndice. Este est
completamente bajo el control del programador, el CardLayout no puede intercambiarse entre
paneles por si solo (o en respuesta a algn evento de usuario, a menos que se escriba el
cdigo para hacerlo), as que no hay algo por defecto para que se intercambien los paneles
como es el caso del Accordion.
El CardLayout tambin soporta la opcin de configuracin deferredRender, que, cuando es
seteada a true, le dice al contenedor que solamente coloque el panel que actualmente se
muestra. Esta es una buena opcin de configuracin para que la carga sea eficiente. Ejemplo:
var panel = new Ext.Panel(
{
title: 'Mi Primer CardLayout',
layout: 'card',
height: 400,
id: 'myCardLayout',
activeItem: 0,
items: [
{
title: 'Panel 1',
html: "Hola, soy el Panel #1<br><br>" +
"<input type=\"button\" value=\"Clic para cambiar al panel #2\" " +
"onClick=\"Ext.getCmp('myCardLayout')" +
".getLayout().setActiveItem(1)\">"
},
{
title: 'Panel 2',
html: "Hola, soy el Panel #2<br><br>" +
"<input type=\"button\" value=\"Clic para cambiar al panel #1\" " +
"onClick=\"Ext.getCmp('myCardLayout')" +
".getLayout().setActiveItem(0)\">"
}]
})

En este ejemplo tenemos configurado un Panel tipo CardLayout que tiene dos paneles
internos, el panel activo es el panel cero, y en la configuracin html de cada uno, se crea un
botn tipo HTML simple, el cual al presionarlo cambia al otro panel configurado
respectivamente.
Ntese que para configurar la propiedad html se usa HTML simple y se maneja el evento

onClick del botn dentro del cual se coloca cdigo propio de Ext JS.

5.2.5 TableLayout
Un TableLayout permite crear capas basadas en tablas con facilidad. En algunos casos es
conceptualmente similar al BorderLayout excepto que se tiene el control de cuantas regiones
podamos querer.
Una gran diferencia entre crear un layout usando TableLayout y usando tablas con HTML plano
es que con TableLayout es que ya no nos preocupamos de las tablas y filas de forma explcita.
No hay que preocuparse de las celdas con filas ni nada por el estilo. Todo lo que hay que hacer
es especificar el nmero de columnas que el TableLayout debe tener y entonces aadir objetos
en cada uno, de derecha a izquierda, de arriba hacia abajo. El TableLayout se dar cuenta de
la posicin de cada panel basndose en la cuenta de filas, adems se podr colocar cualquier
tamao de fila y columna que se necesite. Si se est acostumbrado a la creacin de tablas
HTML, utilizando TableLayout puede ser un poco difcil de entender para el cerebro, pero una
vez que lo hace, rpidamente, uno se da cuenta de la flexibilidad que ofrece. Ejemplo:
var panel = new Ext.Panel(
{
title: 'Mi primer TableLayout',
layout: 'table',
height: 400,
layoutConfig:
{
columns: 2
},
items: [
{
html: 'Columna 1, Celda 1',
width: 200,
height: 200
},
{
html: 'Columna 2',
rowspan: 2,
width: 200,
height: 400
},
{
html: 'Columna 1, Celda 2',
height: 200
}]
})

5.2.6 AnchorLayout
Un AnchorLayout es un layout que permite que los elementos colocados en un contenedor se
acoplen unos con otros. En otras palabras, si el contenedor cambia de tamao, ya sea porque
el contenedor mismo cambia de tamao o indirectamente del resultado del cambio de su
contenedor principal, entonces todos los elementos dentro de l se acoplan al nuevo tamao y
lo ms importante se redimensionan, de acuerdo a las reglas que se configuren.
En esta figura se puede ver que al cambiar de tamao a la ventana, los componentes adentro
tambin cambian de tamao. Ejemplo:
var ventana = new Ext.Window(
{
resizable: true,
layout: "anchor",
title: "Mi Primer AnchorLayout",
width: 200,
height: 200,
items: [
{
xtype: "textfield",
anchor: "100%",
value: "textfield1"
},
{
xtype: "textfield",
anchor: "100%",

value: "textfield2"
},
{
xtype: "textarea",
anchor: "100% 60%",
value: "textarea"
}]
}).show()

En este caso tenemos dos campos de texto y un rea de texto. En la ventana se especifica el
atributo layout como anchor y en cada elemento tambin. El valor de este atributo es siempre
en la forma xx yy donde xx es el valor de anclaje horizontal y yy es el vertical.
Tres tipos de valores son soportados aqu, El primero es un porcentaje. As que en el cdigo
del rea de texto el atributo anchor le dice que debe ser expandido para rellenar la ventana
horizontalmente y que puede tomar un 60% del rea disponible en la ventana. Se puede
configurar tambin un solo valor que especifica el alto y el ancho automticamente.
Se puede tambin especificar un valor de desplazamiento para el atributo anchor. Este puede
ser positivo o negativo. El primer valor es un desplazamiento desde la derecha del contenedor,
y el segundo desde abajo. As, si el atributo anchor para el rea de texto fuera 25
75,
indica
que se debe dibujar el item al ancho completo de la ventana menos 25 pixels y el alto completo
de la ventana menos 75 pixels. Al igual que con porcentajes, en su lugar slo puede especificar
un valor nico, y que se tomar como el derecho de compensacin, con el fondo compensado
por defecto a 0.
Se puede tambin especificar un valor anchor para derecha, o r, otro para abajo o b. Para que
esto haga algo, sin embargo, el contenedor debe tener un tamao arreglado o debe ser
configurada la propiedad anchorSize.
Tambin se puede mezclar ambos tipos de valores, por ejemplo un valor de 10
80% significa
que el elemento debe ser dibujado al ancho completo del contenedor menos 50 pixels desde la
derecha y al 80 por ciento del alto del contenedor.

CAP.6. Ventanas y dilogos

6.1 El ayer y el hoy con ventanas
En tiempos pasados de la web, los usuarios de los sistemas tradicionales pasaran su tiempo
ingresando datos en listas y formas. Escogiendo tems de una lista de rdenes de compra,
luego navegando hacia los detalles una y otra vez. El problema es que estamos hablando de
cientos de entradas en una lista y varios detalles en las formas. Lo ms probable era que, en el
ejemplo anterior de rdenes de compra, se necesita ms subformas
para mostrar toda la
informacin que est disponible y cada vez que el usuario se mueve a otra pantalla se tenga
que refrescar la pgina completa y traer todos los datos de nuevo de la base de datos.
Hoy con los objetos y herramientas que Ext JS nos provee, podemos realizar un mejor trabajo,
tanto en presentacin y obtencin de datos como en velocidad de acceso a las pantallas.
Otra parte importante del rompecabezas que nos permite hacer esto son las ventanas y los
dilogos, ya que nos permiten presentar cualquier clase de informacin sin forzar a los usuarios
a navegar a otras pantallas.

6.2 Dilogos
Los dilogos son una poderosa herramienta para mostrar alertas, mensajes y errores al
usuario, haciendo un buen uso de ellos logramos tener una buena comunicacin entre el
sistema y el usuario creando una interfaz amigable y cmoda.
Todos los dilogos de Ext JS se toman de la clase Ext.MessageBox o con el alias Ext.Msg.

6.2.1 Alert
Ext JS nos provee con un excelente reemplazo a las alertas simples de JavaScript. Con la
siguiente lnea de cdigo veremos como funciona:
Ext.Msg.alert('Hey!', 'Algo pasa!')

La primera cosa que notamos es que Msg.alert tiene dos parmetros, mientras que la alerta

estndar tiene solo uno. El primero nos permite especificar el ttulo de la alerta y el segundo
especifica el cuerpo. Lo que se despliega al ejecutar el cdigo anterior es:
Como se puede ver, su funcionamiento es el mismo que la alerta estndar pero tiene una mejor
apariencia y es ms verstil. Podemos tambin transmitir ms informacin con la barra del
ttulo. Mostrar Msg.alert no detiene temporalmente la ejecucin del script como lo hace la alerta
normal hay que ser concientes de esto cuando se usa la versin de Ext JS.
Tambin hay que tomar en cuenta que se puede usar solo un Ext.MessageBox al mismo
tiempo. Si se trata de enviar dos al mismo tiempo, el primero ser reemplazado por el segundo.

6.2.2 Prompt
Otro componente tipo dilogo es Ext.Msg.prompt. Este nos permite capturar una simple lnea
de texto de la misma forma que el prompt estndar de JavaScript. Sin embargo, en lugar de
limitarse a devolver un valor, nos da algunas opciones ms.
Ejemplo:
Con JavaScript estndar:
<script type="text/javascript">
var data = prompt('Dime algo')
alert(data)
</script>

Con Ext JS:

Ext.Msg.prompt('Hola!', 'Dime algo', function(btn, text)
{
if (btn == 'ok')
{
var data = text
Ext.Msg.alert('T digiste:', data)
}
else
Ext.Msg.alert('Ohh', 'No has querido decir nada')
}, this, false, '')

Una vez ms, Msg.prompt permite pasar un ttulo como el primer argumento, y el cuerpo del
texto es el segundo. El tercer argumento es una funcin de devolucin de llamada o callback
function en ingls, que puede ser llamada cuando cualquiera de los dos botones, Aceptar o
Cancelar sea presionado. La funcin tiene dos argumentos, el botn que fue presionado y el
texto que fue ingresado por el usuario.
Los otros tres parmetros de la funcin, son el objeto, un indicador de multilnea y un valor
inicial, respectivamente. El argumento de multilnea permite tener un rea de escritura ms
amplia para el prompt.

6.2.3 Confirmation
El dilogo de confirmacin permite al usuario escoger entre una accin de confirmacin o
rechazo a alguna accin. El cdigo es el siguiente:
Ext.Msg.confirm('Hola!', 'Est de acuerdo?', function(btn, text)
{
if (btn == 'yes')
{
Ext.Msg.alert('Bien', 'Me alegro mucho')
}
else
{
Ext.Msg.alert('Est bien', 'No hay problema')
}
})

De nuevo usamos, un ttulo, un texto en el cuerpo y una callback function como en el prompt.
Una interesante diferencia con la confirmacin estndar de JavaScript es que da las opciones
de Aceptar y Cancelar y no solo Si y No.

6.2.4 Progress
Los anteriores tipos de dilogos eran un reemplazo a lo que ya exista en el JavaScript
estndar, ahora vamos a ver un dilogo ms, desarrollado por Ext JS, que es el dilogo de
progreso. Ext.Msg.progress , este no est diseado para ser usado independientemente como
los otros dilogos, y no necesita accin del usuario. De hecho, se puede disparar de la
siguiente forma:

Ext.Msg.progress('Hola!', 'Estamos esperando...', 'progreso')

Con esta declaracin estaremos esperando hasta que nos cansemos, porque es un dilogo
que nunca progresa. Los dos primeros argumentos son el ttulo y el texto del cuerpo del
mensaje, igual que en los anteriores tipos de dilogos, mientras que el tercero es el texto que
aparecer en la barra de progreso.
As que para no esperar eternamente, debemos actualizar el movimiento, para eso nos ayuda
el mtodo Ext.Msg.updateProgress , creado solo para este propsito. A continuacin un ejemplo
de su uso:
var count = 0
var interval = window.setInterval(function()
{
count = count + 0.04
Ext.Msg.updateProgress(count)
if (count >= 1)
{
window.clearInterval(interval)
Ext.Msg.hide()
}
}, 100)

Este es un ejemplo muy artificial, en el que llamamos al mtodo upgrateProgress cada 100
milisegundos a travs de un temporizador, e incrementa el progreso usando la variable count
cada vez. El primer argumento de este mtodo es un valor entre cero y uno, con cero
representamos el inicio y con uno representamos el fin, el segundo permite actualizar el texto
de la barra de progreso y el tercero permite cambiar el texto del cuerpo del mensaje. Actualizar
el texto puede ser til si se desea proveer de informacin adicional al usuario, o para mostrar la
representacin del porcentaje completado del proceso actual.
Regresando al ejemplo, ntese que se hace referencia tambin a Ext.Msg.hide, con el fin de
limpiar la barra de progreso de la pantalla, ya que el mtodo updateProgress no maneja esto,
incluso si se establece el progreso actual a un valor de ms de uno.

6.2.5 Show
Los cuatro mtodos anteriores para crear dilogos, son en esencia accesos directos hacia un
quinto mtodo: Ext.Msg.show . Este mtodo toma un objeto de configuracin como su nico
argumento y las opciones de configuracin dentro de l permiten la creacin de un
messagebox que soporta todas las caractersticas disponibles a travs de los mtodos
anteriores. La forma ms simple de este mtodo es:
Ext.Msg.show(
{
msg: 'IMPRESIONANTE.'
})

Esta es una rplica ms cercana a la alerta estndar de JavaScript, pero no es funcional, algo
mejor sera:
Ext.Msg.show(
{
title: 'Hola!',
msg: 'Iconos y Botones! IMPRESIONANTE.',
icon: Ext.MessageBox.INFO,
buttons: Ext.MessageBox.OK
})

Ahora tenemos otra vez un ttulo, un texto en el cuerpo, pero ahora hay un icono y un solo
botn.
La forma de configurar iconos y botones es interesante, se pasa una de las constantes que Ext
JS provee y se puede tener un botn preconfigurado
o tambin se puede una utilizar una clase
CSS que muestre un icono. La lista de constantes para iconos es:
Ext.
Msg.ERROR
Ext.
Msg.INFO
Ext.
Msg.QUESTION

Ext.
Msg.WARNING
Y las constantes para botones son:
Ext.
Msg.CANCEL
Ext.
Msg.OK
Ext.
Msg.OKCANCEL
Ext.
Msg.YESNO
Ext.
Msg.YESNOCANCEL
Esta variedad de opciones listas provee gran flexibilidad cuando deseamos colocar una
apariencia grfica a nuestros messageboxes, pero podemos hacer ms cosas. Las
mencionadas constantes de iconos son simplemente cadenas que representan nombres de
clases elaboradas con CSS. Por ejemplo, Ext.Msg.QUESTION tiene por detrs la configuracin
extmbquestion,
que no es ms que una clase configurada de CSS. Esto se encuentra en las
hojas de estilo de Ext JS. La conclusin lgica es que se puede tambin configurar nuestras
propias clases CSS para colocar en lugar de estas constantes, lo que permite gran
personalizacin de las reas para iconos.
Las constantes de botones son un poco menos flexibles, y contienes objetos literales
especificando como deben ser desplegados. Por ejemplo, Ext.Msg.YESNOCANCEL contiene
lo siguiente (representado en JavaScript Object Notation para fcil lectura):
{cancel:true, yes: true, no:true}

Esto especifica que los botones, yes, cancel y no deben ser incluidos. Se puede usar esto para
apagar un botn u otro, pero no se puede cambiar el orden en el que aparecen, debido a que
es un estndar.
Sin embargo, podemos ajustar los dilogos de otras maneras. Es posible colocar dimensiones
a un cuadro de dilogo, alto y ancho. Este puede ser til en situaciones donde se tenga que
desplegar un mensaje muy grande y se deba evitar que se extienda a lo largo de la pantalla.
El cuadro de dilogo show , y su objeto de configuracin permiten la opcin cls para especificar
una clase CSS para aplicar al contenedor del dilogo. Un desarrollador podra usar esto para
remarcar cualquier objeto del contenedor usando reglas CSS.

6.2.6 Comportamiento general de Show

Hasta el momento, las opciones de configuracin para Ext.Msg.show han sido solo de
apariencia, pero hay algunas opciones que pueden ajustar el comportamiento. Si se usa la
propiedad progress , entonces se puede replicar el dilogo estndar de progreso de Ext JS:
Ext.Msg.show({progress:true})

Mediante el uso de este conjunto de opciones con otras como ttulo y cuerpo de mensaje, se
puede crear cuadros de dilogo bastante personalizados.
De forma similar, el prompt y las opciones de multilnea permiten la creacin de cuadros de
dilogo de entrada:
As que se puede crear un cuadro de dilogo que acepte mltiples lneas de ingreso. Pero por
omisin el valor multilnea es falso, se puede limitar el cuadro de dilogo a una sola lnea, etc.
Se puede hacer cuadros de dilogo de entrada muy personalizados.
Otra opcin que cambia el comportamiento por defecto de un cuadro de dilogo es modal. Esta
opcin permite especificar si el usuario puede interactuar con los elementos que estn detrs
de la ventana emergente. Cuando se establece en true, se coloca un recubrimiento
semitransparente para evitar la interaccin.
Como hemos visto antes, los cuadros de dilogo de Ext JS, no bloquean la ejecucin del script,
como sucede en JavaScript. Esto significa que se pueden usar callback functions para disparar
cdigo despus de que el dilogo es cerrado. Podemos hacer esto usando la opcin de
configuracin fn de show, que es llamada con dos argumentos, el cdigo del botn que ha sido
presionado y el texto ingresado dentro del campo en el dilogo (donde el dilogo incluye un

campo de entrada). Obviamente, para una alerta simple el parmetro del texto vendr en
blanco, pero esta funcin proporciona de forma consistente toda la gama de cuadros de dilogo
que pueden ser creados utilizando Ext.Msg.show.

6.3 Ventanas
Cualquier usuario de computadoras esta familiarizado con el concepto de ventanas un panel
informativo que aparece en la pantalla para proporcionar ms datos sobre las acciones del
usuario actual. Ext JS aplica este concepto mediante el uso de la clase Ext.Window , un
poderoso componente que soporta varios avanzados escenarios.

6.3.1 Empezando
Se puede abrir una ventana usando una pequea cantidad de cdigo:
var w = new Ext.Window(
{
height: 100,
width: 200
})
w.show()

Corriendo este cdigo se obtiene una ventana vaca que en si misma es completamente intil,
pero esto muestra algunas de las caractersticas predeterminadas de Ext.Window. As, sin
ninguna configuracin, la ventana se puede arrastrar y se puede ajustar en tamao, adems se
tiene un til icono para cerrarla en la esquina superior derecha. Todava no es una
demostracin muy impresionante, sin embargo, porque nuestra ventana en realidad no muestra
nada.
La forma ms fcil de rellenar una ventana es con el viejo y plano HTML. Por ejemplo:
var w = new Ext.Window(
{
height: 150,
width: 200,
title: 'Una Ventana',
html: '<h1>Ohhh</h1><p>Hola a todos desde aqu</p>'
})
w.show()

Se han aadido dos nuevas opciones de configuracin aqu. La primera es un ttulo que
permite colocar un texto en la barra superior de la ventana y la segunda permite aceptar una
cadena HTML que despliega un texto en la ventana.
El uso de este enfoque es inmediatamente evidente, se puede volver a lo bsico e inyectar
cualquier contenido HTML que se requiera directamente en el rea del contenedor. Esto nos
permite modificar nuestra ventana justo cerca del nivel marcado y proporcionar cientos de CSS
para enganchar el estilo. An as, esto no es lo que se espera llegar a tener con Ext JS. Hay
muchas otras opciones que permitirn llegar a lo deseado.

6.3.2 Un panel con potencia

Hay que recordar que Window es una subclase de Panel, y Panel tiene toda clase de
interesantes trucos bajo la manga. La opcin de configuracin tems, acepta un vector de
objetos de configuracin u otras instancias de componentes:
var w = new Ext.Window(
{
items: [
{
xtype: 'textfield',
fieldLabel: 'Nombre'
}, new Ext.form.TextField(
{
fieldLabel: 'Apellido'
})]
})
w.show()

En el ejemplo de arriba, se han aadido dos textfields , el primero usando inicializacin lazy
con xtype y el segundo usando una inicializacin estndar. Estos dos tems sern aadidos al
panel interno de la ventana, pero la manera en la que son desplegados puede ser controlada
con la propiedad layout de nuestra ventana.

6.3.3 Layout

Ext JS define un nmero de modelos de layout dentro del paquete Ext.layout y cada uno de
estos puede ser con un panel para permitir que los componentes dentro de l sean dispuestos
de una manera especfica. En el ejemplo anterior, se aadieron dos cajas de texto a la ventana,
pero podemos mejorar la apariencia de la ventana simplemente usando el layout apropiado. En
este caso, necesitamos Ext.layout.FormLayout , que proporciona soporte para etiquetas y el
espacio general y el posicionamiento esperado para una forma con campos editables:
var w = new Ext.Window(
{

layout: 'form',
items: [
{
xtype: 'textfield',
fieldLabel: 'Nombre'
}, new Ext.form.TextField(
{
fieldLabel: 'Apellido'
})]
})
w.show()

Usando la opcin de configuracin layout , para especificar que se desea tener un panel tipo
form , se puede apreciar inmediatamente la diferencia:
Esta no es una caracterstica de Ext.Window ya que proviene de la super clase Panel. Pero el
hecho de que una ventana soporte esta caracterstica es extremadamente importante para un
desarrollador de aplicaciones, especialmente si tenemos en cuenta cunto tiempo tomara
crear una forma rica con la tcnica de inyeccin de cdigo HTML. Las otras layouts dentro del
paquete Ext.Layout , proporcionan muchos ms enfoques de diseo y expansin de escenarios
que una ventana puede soportar.
Adems para las varias maneras de rellenar un rea de contenido de una ventana, tambin se
tiene una gran flexibilidad cuando se trata de la apariencia y el comportamiento de un cuadro
de dilogo. Hay muchas opciones de configuracin proporcionados por la jerarqua de la super
clase Ext.Window , que empiezan con el Ext.Panel, al mismo tiempo que tiene una gran
cantidad de opciones de configuracin propias.

6.3.4 Limpiando ventanas

En nuestro primer ejemplo de ventanas, se demostr que se tiene un gran nmero de
caractersticas para reajustar, arrastrar libremente y adems se tiene un botn para cerrar. Ya
dentro de una aplicacin, pueden haber ventanas con estrictos diseos de configuracin, y no
necesitan ser reajustables, por lo que se puede evitar este comportamiento seteando el valor
false en la propiedad resizable. A menudo arrastrar, tambin es solo una cuestin de
preferencia, y en muchos casos dejar activada esta propiedad puede causar dao y sera mejor
deshabilitarla. Lo que quiere decir que hay veces en las que no es necesariamente funcional,
para mostrar como, tenemos el siguiente ejemplo:
var w = new Ext.Window(
{
height: 50,
width: 100,
closable: false,
draggable: false,
resizable: false
})
w.show()

Cuando se usa una ventana tipo forma, a menudo es preferible disponer de botones de texto
para explicar las diferentes acciones, por ejemplo, se puede grabar un registro o cancelar algn
cambio que haya sido realizado y en algunos casos, el botn cerrar puede ser deshabilitado,
colocando la opcin closable a false. Hay una segunda opcin que da un poco ms de control
sobre este comportamiento: closeAction puede ser configurada para cuando deseamos ocultar
y no cerrar nuestra ventana, con hide simplemente se hace que desaparezca la ventana,
mientras que con close, se remueve la ventana del DOM. Esta es una importante diferencia si
se desea reutilizar la ventana despus, ya que esconder la ventana para mostrarla cuando se
necesite es ms eficiente que recrearla cada vez.

6.3.5 Los extras

Con las opciones de configuracin bajo control, se pueden revisar las maneras en las que se
puede modificar y aumentar las caractersticas de la Ext.Window . Ya se ha demostrado el uso
de las opciones height y width, para configurar las dimensiones de la ventana y recortar
cualquier contenido que exceda estas dimensiones.
Se tienen tambin otras opciones como autoheight y autoWidth, que reciben valores buleanos,
que permiten rellenar la ventana con componentes sin tener que preocuparse de asegurar que
los valores de ancho y alto sean siempre correctos. Esto es realmente til durante el desarrollo,
cuando es poco probable que se tengan en cuenta las dimensiones exactas de lo que se est
creando, solo se debe colocar true en las propiedades autoheight y autoWidth. An mejor,
estas opciones se pueden usar separadamente, lo que permite colocar un ancho fijo pero se
puede colocar un largo ajustable y viceversa. Esto es til si se est colocando contenido
dinmico en la ventana, pero en este caso, hay que estar seguros de las dimensiones de la
ventana no excedern los lados de la pantalla.

6.3.6 Funcionando dentro de un escritorio

El ejemplo ms generalizado de un sistema de ventanas es el que nos muestra un escritorio de
computadora, con varias ventanas que representan aplicaciones o elementos del sistema de
archivos. En dichos sistemas, los usuarios pueden esconder ventanas para usarlas despus, o
puede minimizarlas ellos tambin son capaces de expandir las ventanas hasta llenar la
pantalla o maximizarlas. Estos son trminos familiares y por supuesto son soportados por
Ext.Window a travs de las opciones de configuracin maximizable y minimizable.
Estas caractersticas estn deshabilitadas por defecto, pero pueden ser de utilidad para
trabajar en ambientes tipo escritorio. Cuando se configuran con true, van a aparecer nuevos
iconos en la parte superior derecha de la ventana de forma similar a las ventanas del sistema
operativo Ms. Windows. La propiedad maximizable permite que la ventana se expanda y llene
todo el espacio disponible en la ventana del explorador, como se espera, pero la propiedad
minimizable, es un poco ms difcil. Ext JS no sabe donde se va a esconder la ventana
minimizada, que en el caso del sistema operativo Ms. Windows sera a la barra de tareas, pero
para otros sistemas operativos podra ser en otro lugar. Por lo que se debe programar la
funcionalidad de minimizar a mano, Ext JS provee solo un icono para el minimizado y el evento
minimizar que debe ser manejado de manera apropiada para la aplicacin que se est
desarrollando, para minimizar una ventana de Ext JS, hay que utilizar CSS y programacin
adicional.

6.3.7 Otras opciones

La clase Ext.Window, tiene otros medios para cambiar el estado real de las ventanas, y est
integrado todo dentro del framework. La propiedad buleana collapsible, aade otro botn a la
parte superior derecha de la ventana y permite al usuario encogerla para que se muestre solo
la barra superior. Un segundo clic expande la ventana, regresndola a su estado original.
Se puede usar tambin la configuracin expandOnShow para especificar que una ventana
escondida siempre debe aparecer expandida a toda su dimensin cuando se muestre de
nuevo. Esto es til para las ventanas que han sido escondidas previamente y necesite ser
tradas de vuelta.
Adems de la barra de ttulo estndar y el rea de contenido del cuerpo, se puede aadir ms
reas de contenido a una ventana. Algunas de estas reas pueden ser completamente
personalizadas, y algunas son un poco ms restrictivas, pero juntas estas propiedades son otro
mtodo de crear ventanas funcionales.
Dependiendo de los requerimientos, se puede escoger usar una o ms de estas reas de
contenido para proporcionar herramientas que permitan a los usuarios manipular y consumir la
informacin dentro de las ventanas. Un tpico ejemplo podra ser crear una ventana con un
layout tipo form, que incluye los botones de Grabar y Cancelar en el pie de la misma. Esto
refleja el estilo tpico de una forma de entrada de datos, y puede ser posicionada
automticamente por medio de Ext JS con una pequea configuracin.

6.3.8 Manipulacin
Cuando nuestras ventanas estn en la pantalla, tenemos un rango de mtodos que pueden ser

usados para cambiar su posicin, apariencia y comportamiento. De hecho, ya hemos usado

uno de estos mtodos en nuestros ejemplos showque
es usado para desplegar la ventana
en primer lugar. Aunque hemos usado show en la mayora de ejemplos, este mtodo puede
tener tres argumentos, todos son opcionales.
w.show('animTarget', function()
{
alert('Ahora mostrando')
}, this)

Primeramente, podemos especificar une elemento, o el ID de un elemento, para formar el

punto de partida desde el que la ventana deber animarse cuando se abra. Este efecto
cosmtico puede tambin ser especificado usando la opcin de configuracin animateTarget .
El segundo argumento es una callback function, que se dispara cuando la presentacin de la
ventana se ha completado, y el tercer argumento es simplemente el mbito definido para la
funcin que se ejecutar. Result que el mtodo show no era tan simple despus de todo.
El obvio compaero de show es hide. En efecto, este toma los mismos argumentos, y har que
la ventana desaparezca de la pantalla para su posterior uso. Si se est seguro de que no se
necesitar la ventana nuevamente entonces es probable usar el mtodo close, que remueve a
la ventana del DOM y la destruye.
La funcionalidad de los mtodos close y hide, se manejan para los iconos de la ventana. Hay
un poco ms de mtodos que permiten tener control sobre los tems, que ya hemos visto como
son minimize y maximize. Esta funcionalidad bsica se aumenta con el mtodo restore, que es
usado despus de maximizar y retorna la ventana con sus dimensiones originales, y
toggleMaximize, que es simplemente un acceso directo entre maximize y restore. Y en trminos
de configuracin, para que la ventana retorne a su configuracin inicial, usamos el mtodo
center , que coloca la ventana en el medio de la ventana del explorador.
Tambin se puede manipular la posicin de nuestras ventanas, alignTo permite a un
desarrollador por medio de cdigo, mover una ventana prxima a otro elemento especificado.
Este mtodo tiene tres parmetros:
El
elemento al que se va a alinear la ventana.
La
posicin de alineamiento
Una
posicin de desplazamiento, especificada en un array tipo [x, y]
Este mtodo es til cuando se tiene una aplicacin con un espacio de trabajo dinmico, y se
necesita asegurarse de que la ventana aparezca en el correcto lugar en relacin a otro tem
que ha sido desplegado previamente. Un til complemento para esta caracterstica es el
mtodo anchorTo, que toma los mismos argumentos y permite a una ventana permanecer
anclada a otro elemento, incluso cuando la ventana del explorador ha sido cambiada de
tamao o de desplazamiento.
Si bien muchos de los mtodos de la clase Ext.Window simplemente proporcionan acceso a
una funcionalidad existente va cdigo, hay muchos otros ms que proporcionan avanzados
escenarios que sera difcil elaborar a mano.

6.3.9 Eventos
Casi todas las acciones que hemos cubierto hasta ahora tienen sus propios eventos, que sirven
para correr nuestro propio cdigo personalizado. El evento minimize, es uno de los que hemos
mencionado antes, porque se debe manejar manualmente este evento si se desea que el icono
de la ventana realice algo. Idealmente, se espera que la ventana se almacene en una especie
de rea estilo taskbar para despus restaurarla.
var w = new Ext.Window(
{
height: 50,
width: 100,
minimizable: true
})
w.on('minimize', doMin)
w.show()

En el ejemplo de arriba, estamos creando una nueva ventana, cuya propiedad minimizable, se
coloca en true, y entonces aadimos un evento para que el minimizado funcione, para a
continuacin mostrar la ventana en la pantalla. La funcin que manejar este evento es algo
as:
function doMin()
{
w.collapse(false)
w.alignTo(document.body, 'blbl')

Nosotros simplemente le decimos a la ventana que se colapse en la parte de abajo mostrando

solo la barra del ttulo (pasando un parmetro buleano con valor false que simplemente indica
que no debe animar la ventana) y entonces usamos el mtodo alignTo, discutido previamente.
Con los parmetros que hemos elegido, la ventana se alinear en la parte inferior izquierda del
cuerpo del documento, tal como lo hiciera una ventana nica en una barra de tareas.
Por supuesto, si se tuviera ms ventanas, terminaramos con una superposicin en pila en la
parte inferior izquierda lo cul no es ideal en aplicacin del mundo real. Sin embargo, el
ejemplo muestra como se debe manejar el evento de minimizado, y puede ser usado como una
alternativa al mtodo colapsar.

CAP.7. Toolbars, Botones y Mens

7.1 Creacin de barras
7.1.1 Toolbars
Una barra de herramientas o toolbar en ingls, se puede colocar en cualquiera de los
contenedores antes revisados, ya sea un panel, una ventana, un tabpanel o una forma.
Todos los contenedores tienen dos barras, una arriba y otra abajo, se pueden colocar las dos o
una sola de las dos, la opcin de configuracin para cada una es de la siguiente forma, se
coloca dentro de las propiedades de cualquier contador lo siguiente:
tbar: Para la barra de arriba (top bar)
bbar: Para la barra de abajo (bottom bar)
Tambin se puede crear una toolbar a partir de su clase constructora de la siguiente forma:
new Ext.Toolbar(
{
renderTo: document.body,
items: [
{
xtype: 'tbbutton',
text: 'Button'
},
{
xtype: 'tbbutton',
text: 'Menu Button',
menu: [
{
text: 'Better'
},
{
text: 'Good'
},
{
text: 'Best'
}]
},
{
xtype: 'tbsplit',
text: 'Split Button',
menu: [
{
text: 'Item One'
},
{
text: 'Item Two'
},

{
text: 'Item Three'
}]
}]
})

7.1.2 Botn
La creacin de un botn es bastante sencilla la principal opcin de configuracin es el texto
que se desplegar sobre el botn. Se puede aadir tambin un icono para ser utilizado junto al
texto si se desea hacerlo. A continuacin la sintaxis:
{
xtype: 'tbbutton',
text: 'Button'
}

Este botn se debe colocar en una barra superior o inferior, de la siguiente forma:
var w = new Ext.Window(
{
title: 'Mi ventana',
height: 500,
width: 500,
tbar:[
{
xtype: 'tbbutton',
text: 'Click me'
}]
})

7.1.3 Men
Un men, no es nada ms que un botn con un men desplegable, es muy simple tambin.
Los tems del men trabajan con los mismos principios de los botones. Pueden tener iconos,
clases y manejadores asignados a ellos. Los tems del men pueden tambin agruparse juntos
para formar un conjunto de botones, pero primero se debe crear un men estandar:
Esta es la configuracin tpica para un men:
{
xtype: 'tbbutton',
text: 'Button',
menu: [
{
text: 'Better'
},
{
text: 'Good'
},
{
text: 'Best'
}]
}

Como se puede ver, una vez que la configuracin del array de mens est desarrollada, los
mens cobran vida. Para agrupar estos tems de men juntos, se necesita colocar la opcin de
configuracin group con un valor igual para cada grupo que se desee colocar, adems se debe
colocar buleano positivo para cada item:
{
xtype: 'tbbutton',
text: 'Button',
menu: [
{
text: 'Better',
checked: true,
group: 'quality'
},
{
text: 'Good',
checked: false,
group: 'quality'
},
{
text: 'Best',
checked: false,

group: 'quality'
}]
}

7.1.4 Botn split

El botn split es un botn estndar y no es un men combinado, con un pequeo giro. Pero
usando este tipo de botn, se puede usar la funcionalidad de un botn, mientras que se aade
la opcin de seleccionar un item del men adjunto. Al hacer clic en la parte izquierda del botn
que contiene el texto, se activa la accin del botn. Sin embargo, al hacer clic en el lado
derecho del botn, que contiene una pequea flecha hacia abajo, se activa el men.
{
xtype: 'tbsplit',
text: 'Split Button',
menu: [
{
text: 'Item One'
},
{
text: 'Item Two'
},
{
text: 'Item Three'
}]
}

7.1.5 Alineacin, divisores y espacios

Por defecto, los elementos de una barra de herramientas se alinean a la izquierda. No hay
configuracin de alineamiento para una barra, por lo tanto si se desea alinear todos los botones
a la derecha, se necesita aadir un espacio lleno, como el primer elemento de una barra. Si se
quiere tener tems divididos entre ellos a la izquierda y a la derecha, tambin se puede utilizar
un espacio lleno:
{
xtype: 'tbfill'
}

Se debe colocar este elemento en una barra donde se desee aadir un espacio y se requiera
que los tems sean empujados hacia el final de la barra.
Tambin se puede colocar separadores con unos pocos pixels de espacio vaco que pueden
ser usados para dar espacio entre botones, o mover los elementos fuera del borde de la barra:
{
xtype: 'tbspacer'
}

Un divisor tambin puede ser colado de la misma forma:

{
xtype: 'tbseparator'
}

7.1.6 Accesos directos

Ext JS tiene varios accesos directos que pueden ser usados para hacer cdigo ms rpido. Los
accesos directos son uno o dos caracteres que pueden ser usados en lugar de un objeto de
configuracin. Por ejemplo considerando un llenado estndar de una barra:
{
xtype: 'tbfill'
}

El accesos para un llenado de una barra es un guin con un smbolo de mayor que:
>
No todos los accesos directos estn documentados. Aqu est la lista de los accesos directos
de uso comn:
Componente Acceso
directo Descripcin
Llenado '>'
El llenado o fill en ingls, es utilizado para empujar hacia la
derecha los tems de una barra
Separador ''
Es una barra vertical que es usada para visualizar los tems de

forma separada
Espaciador ''
Espacio en blanco usado para separar visualmente los tems. El
espacio es de dos pxeles, pero se puede cambiar reemplazando
la clase CSS ytbspacer
Texto de tem Cualquier texto Agrega cualquier texto o HTML directamente en la barra de
herramientas con solo colocar este texto entre comillas

7.1.7 Botones de iconos

El botn estndar puede actuar como un botn de icono o icon button en ingls, como los que
se ven en los editores de texto para colocar negritas o itlicas. Se necesitan dos pasos para
transformar un botn simple en un botn con icono:
Se
debe definir la imagen que ser usada como icono
Y
aplicar la clase apropiada al botn
{
xtype: 'tbbutton',
cls: 'xbtnicon',
icon: 'imagenes/arrow.gif'
}

Tambin podramos colocar un icono a lado del texto de un botn de la siguiente forma:
{
xtype: 'tbbutton',
cls: 'xbtntexticon',
icon: 'imagenes/arrow.gif',
text: 'Flecha'
}

7.1.8 Manejadores de botones

Un botn necesita hacer ms que solo lucir bonito, necesita reaccionar a una accin del
usuario. Aqu es donde entran en accin los manejadores o handlers en ingls. Un handler es
una funcin que es ejecutada cuando un botn o item de men es presionado con un clic.
La configuracin del handler es donde se aade una funcin:
{
xtype: 'tbbutton',
text: 'Mensaje',
handler: function()
{
Ext.Msg.alert('Mensaje','Enviado desde el boton')
}
}

Este cdigo desplegar un mensaje tipo alerta al dar clic al botn. Algunas veces se necesita
que se realicen cambios al botn cuando se presiona, es as que el manejador del botn pasa
una referencia a s mismo para este propsito. El primer argumento de la funcin es una
referencia al componente que dispara el evento.
{
xtype: 'tbbutton',
text: 'Boton',
handler: function(f)
{
f.disable()
}
}

Se puede tomar esta referencia a s mismo y acceder a todas las propiedades y funciones del
botn. Por ejemplo, al llamar a la funcin disable() , el botn se transforma a color gris.

7.1.9 Cargar contenido con el clic de un botn

Vamos a hacer algo ms til en el clic de un botn. Para este ejemplo vamos a aadir una
opcin de configuracin a cada tem de un men que ser usado para determinar que
contenido de archivo se cargar en el cuerpo de una pgina:
{
xtype: 'tbsplit',
text: 'Help',

menu: [
{
text: 'Genre',
helpfile: 'genre',
handler: Movies.showHelp
},
{
text: 'Director',
helpfile: 'director',
handler: Movies.showHelp
},
{
text: 'Title',
helpfile: 'title',
handler: Movies.showHelp
}]
}

Ntese que tenemos una opcin de configuracin.