CursodeExtJS

CAP.1.Conceptosfundamentales ................................................................................. 3
1.1DOM................................................................................................................... 3
1.2DHTML .............................................................................................................. 4
1.3CSS..................................................................................................................... 4
1.4JavaScript............................................................................................................ 4
1.5AJAX.................................................................................................................. 5
1.5.1ElobjetoXMLHttpRequest .......................................................................... 6
1.6XML ................................................................................................................... 7
1.7RIA ..................................................................................................................... 8
1.8JSON................................................................................................................... 9
1.9jQuery ................................................................................................................. 9
1.10Prototype......................................................................................................... 10
CAP.2.IntroduccinaExtJS....................................................................................... 11
2.1Unpocodehistoria........................................................................................... 11
2.2QuesexactamenteExtJS?.............................................................................. 11
2.3ExtJSesasncrono............................................................................................. 11
CAP.3.EmpezandoausarExtJS................................................................................. 12
3.1DescargandolalibreraExtJS ............................................................................ 12
3.2Dndeycmoinstalarlo? ................................................................................ 12
3.3DocumentacinExtJS ....................................................................................... 12
3.4Construyendoelproyecto .................................................................................. 12
3.4.1LaprimeralibreraconExtJS ..................................................................... 13
3.5Spacerimage..................................................................................................... 14
3.6Probemoslosidiomas........................................................................................ 14
3.7Algounpocomscomplicado........................................................................... 15
3.8JSONyelobjetodeconfiguracin .................................................................... 16
3.8.1Lamaneraantigua ...................................................................................... 16
3.8.2Lanuevaformadeconfigurarobjetos......................................................... 16
3.8.3Queselobjetodeconfiguracin?............................................................ 17
3.8.4ComofuncionaJSON ................................................................................. 18
3.9Modificandoelejemploanterior........................................................................ 18
3.9.1Encendiendoelfuego................................................................................. 19
CAP.4.PanelsyTabPanels ......................................................................................... 21
4.1Panel ................................................................................................................. 21
4.1.1ElaboracindePanels................................................................................. 21
4.2TabPanel ........................................................................................................... 21
4.2.1ConstruyendonuestroprimerTabPanel ...................................................... 21
4.2.2ManejodeTabs,mtodosquedebesconocer.............................................. 22
CAP.5.Viewports,layoutsyregions........................................................................... 23
5.1.Viewports......................................................................................................... 23
5.2Layouts ............................................................................................................. 23
5.2.1FitLayout.................................................................................................... 23
5.2.2BorderLayout ............................................................................................. 23
5.2.3Accordion................................................................................................... 25
5.2.4CardLayout................................................................................................. 26
5.2.5TableLayout ............................................................................................... 27
5.2.6AnchorLayout............................................................................................. 28

CAP.6.Ventanasydilogos........................................................................................ 30
6.1Elayeryelhoyconventanas ............................................................................ 30
6.2Dilogos............................................................................................................ 30
6.2.1Alert ........................................................................................................... 30
6.2.2Prompt........................................................................................................ 31
6.2.3Confirmation .............................................................................................. 32
6.2.4Progress...................................................................................................... 32
6.2.5Show .......................................................................................................... 33
6.2.6ComportamientogeneraldeShow .............................................................. 34
6.3Ventanas ........................................................................................................... 35
6.3.1Empezando ................................................................................................. 35
6.3.2Unpanelconpotencia................................................................................ 36
6.3.3Layout ........................................................................................................ 36
6.3.4Limpiandoventanas.................................................................................... 37
6.3.5Losextras ................................................................................................... 38
6.3.6Funcionandodentrodeunescritorio ........................................................... 38
6.3.7Otrasopciones ............................................................................................ 38
6.3.8Manipulacin.............................................................................................. 39
6.3.9Eventos....................................................................................................... 40
CAP.7.Toolbars,BotonesyMens............................................................................. 41
7.1Creacindebarras............................................................................................. 41
7.1.1Toolbars ..................................................................................................... 41
7.1.2Botn.......................................................................................................... 41
7.1.3Men .......................................................................................................... 42
7.1.4Botnsplit .................................................................................................. 43
7.1.5Alineacin,divisoresyespacios ................................................................. 43
7.1.6Accesosdirectos ......................................................................................... 43
7.1.7Botonesdeiconos....................................................................................... 44
7.1.8Manejadoresdebotones.............................................................................. 44
7.1.9Cargarcontenidoconelclicdeunbotn .................................................... 45
Referenciabibliogrfica .............................................................................................. 46
ReferenciasdeInternet................................................................................................ 47

CAP.1.Conceptosfundamentales
1.1DOM
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.
Desdeelpuntodevistadeldesarrollodepginasweb,elDOMnosindicaculeslanaturaleza
delaestructuradelosdocumentosynosproveedeunaseriederecursosparapoderacceder
atodossuselementos,alarelacinqueexisteentreellos,asuscaractersticas,susmodosde
representacinyloseventosquesoportan.
El DOM tienevarios elementos, cada uno se encuentra dentro de una jerarqua, tanto HTML
comoXMLtienencomobaseunaestructuradentrodelacualsedefinenlosnodosquepueden
serdeinformacinenelcasodelXMLydeobjetosenelcasodeHTML.
EstructuraHTML:

Relacinentrenodos:

Ejemplo: En el caso de un input, se puede acceder a sus propiedades o caractersticas

navegandoporsujerarqua,apartirdedocument>forms[0]:

<inputtype="text"name="caja"/>
Paraaccederalvalordelinput:
document.forms[0].caja.value

1.2DHTML
ElHTMLDinmico(DHTML),noesmsqueunaformadeaportarinteractividadalaspginas
web,quetienelaventajadepodercrearefectosquerequierenpocoanchodebandaalahora
deejecutarseysonestosefectoslosqueaumentanlafuncionalidadalapgina,queconsolo
HTMLsimpleseraimposiblederealizar.AunquemuchasdelascaractersticasdelDHTMLse
podranduplicarconotrasherramientascomoJavaoFlash,elDHTMLofrecelaventajadeque
norequiereningntipodepluginparapoderutilizarlo.
Aunque las tecnologas en las que se basa el DHTML (HTML, CSS, JavaScript) estn
estandarizadas,laformaenqueseimplementanenlosvariosnavegadores,difiereentres.
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
visualiceperfectamenteentodoslosnavegadores.

1.3CSS
Esunmecanismosimpleparaaadirestilos(fonts,colors,spacing)alosdocumentosWeb.
La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un
documentodesupresentacin.
Ejemplo:
position
left
top
width
height
clip
visiblity
zindex
backgroundcolor
layerbackgroundcolor
backgroundimage
layerbackgroundimage

:absolute
:50px
:100px
:200px
:100px
:rect(0px200px100px0px)
:visible
:1
:#FF0000
:#FF0000
:URL(icono.gif)
:URL(icono.gif)

1.4JavaScript
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
lenguajeJava.
NoesunlenguajedeProgramacinOrientadaaObjetospropiamentedichocomoJava,pero
graciasaqueesbasadoenprototipos,sepuedeaplicarconceptosdeprogramacinorientada
aobjetos.
Ejemplo:

<scripttype="text/javascript">
functionfEnviaAlerta()
{
vartexto=document.forms[0].caja.value
alert(texto)
}
</script>

1.5AJAX
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
usuariosmientrassemantienelacomunicacinasncronaconelservidorensegundoplano.
De esta forma es posible realizar cambios sobre las pginas sin necesidad de recargarlas, lo
quesignificaaumentarlainteractividad,velocidadyusabilidadenlasaplicaciones.
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 lavisualizacin ni el comportamiento
delapgina.JavaScriptesellenguajeinterpretado(scriptinglanguage)enelquenormalmente
se efectan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza
medianteXMLHttpRequest,objetodisponibleenlosnavegadoresactuales.Encualquiercaso,
noesnecesarioqueelcontenidoasncronoestformateadoenXML.
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
DocumentObjectModel(DOM).
Laconversacintradicionalentreelclienteyelservidoresenserie,secargaunasolapginaa
lavez,comoseexplicaenlasiguienteimagen:

La interaccin AJAX entre el cliente y el servidor es asncrona, es decir dentro de la misma

pginaserealizalasolicitudyentregaderespuesta,graciasalobjetoXMLHttpRequest,como
semuestraenlasiguienteimagen:

ElprocesodeunaaplicacinAJAXserveradelasiguienteforma,comomuestralaimagen:

1.5.1ElobjetoXMLHttpRequest

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
comounobjetoActiveX.
Propiedades:
Propiedades
Descripcin
onreadystatechange DeterminaquefuncinserllamadacuandolapropiedadreadyStatedel
objetocambie.
readyState
Nmeroenteroqueindicaelstatusdelapeticin:
0=Noiniciada
1=Cargando
2=Cargado
3=Interactivo
4=Completado
responseText
Datosdevueltosporelservidorenformadestringdetexto
responseXML
Datosdevueltosporelservidorexpresadoscomounobjetodocumento.
status
CdigoestatusHTTPdevueltoporoelservidor:
200=OK(Peticincorrecta)
204=NoContent(Documentosindatos)
301=MovedPermanently(RecursoMovido)
401=NotAuthorized(Necesitaautenticacin)
403=Forbidden(Rechazadaporservidor)
404=NotFound(Noexisteenservidor)
408=RequestTimeout(Tiemposobrepasado)
500=ServerError(Errorenelservidor)
Mtodos:
Propiedades
abort()
getAllResponseHeaders()
getResponseHeader(x)
open(method,URL,a)

Descripcin
Detienelapeticinactual.
Devuelvetodaslascabecerascomounstring.
Devuelveelvalordelacabeceraxcomounstring.
EspecificaelmtodoHTTP(porejemplo,GEToPOST),la
URLobjetivo,ysilapeticindebesermanejada
asncronamente(Si,a=TruedefectoNo,a=false.)

send(content)
setRequestHeader(label,value)

Envalapeticin
Configuraunparparmetroyvalorlabel=valueyloasigna
alacabeceraparaserenviadoconlapeticin.

1.6XML
XML,siglaseninglsdeeXtensibleMarkupLanguage(lenguajedemarcasextensible),esun
metalenguajeextensibledeetiquetasdesarrolladoporelWorldWideWebConsortium(W3C).
Es una simplificacin y adaptacin del SGML y permite definir la gramtica de lenguajes
especficos(delamismamaneraqueHTMLesasuvezunlenguajedefinidoporSGML).Por
lotantoXMLnoesrealmenteunlenguajeenparticular,sinounamaneradedefinirlenguajes
paradiferentesnecesidades.AlgunosdeestoslenguajesqueusanXMLparasudefinicinson
XHTML,SVG,MathML.
XMLnohanacidosloparasuaplicacinenInternet,sinoqueseproponecomounestndar
paraelintercambiodeinformacinestructuradaentrediferentesplataformas.Sepuedeusaren
basesdedatos,editoresdetexto,hojasdeclculoycasicualquiercosaimaginable.

XMLesunatecnologasencillaquetieneasualrededorotrasquelacomplementanylahacen
muchomsgrandeyconunasposibilidadesmuchomayores.Tieneunpapelmuyimportante
enlaactualidadyaquepermitelacompatibilidadentresistemasparacompartirlainformacin
deunamanerasegura,fiableyfcil.
Ejemplo:
<?xmlversion='1.0'encoding='iso88591'?>
<datos>
<total>
125
</total>
<dato>
<codigo>
<![CDATA[77]]>
</codigo>
<nombre>
<![CDATA[AguasTermalesBaosEntradageneral.]]>
</nombre>
<datos_insumo>
<![CDATA[|Tipo:Entradas|Proveedores:MunicipiodeBaos]]>
</datos_insumo>
</dato>
<dato>
<codigo>
<![CDATA[78]]>
</codigo>
<nombre>
<![CDATA[AguasTermalesPapallactaEntradageneral]]>
</nombre>
<datos_insumo>
<![CDATA[|Tipo:Entradas|Proveedores:TermasdePapallacta]]>
</datos_insumo>
</dato>
</datos>

1.7RIA
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
agreganlascaractersticasadicionales.
Esta surge como una combinacin de las ventajas que ofrecen las aplicaciones Web y las
aplicacionestradicionales.Buscanmejorarlaexperienciadelusuario.
NormalmenteenlasaplicacionesWeb,hayunarecargacontinuadepginascadavezqueel
usuariopulsasobreunenlace.Deestaformaseproduceuntrficomuyaltoentreelclienteyel
servidor,llegandomuchasveces,arecargarlamismapginaconunmnimocambio.
EnlosentornosRIA,encambio,noseproducenrecargasdepgina,yaquedesdeelprincipio
se carga toda la aplicacin, y slo se produce comunicacin con el servidor cuando se
necesitandatosexternoscomodatosdeunaBasedeDatosodeotrosficherosexternos.
Ejemplo:UnejemplomuybuenodeRIAeseldesktopcreadoporelExtJSteamqueutilizaun
menmuyparecidoaldelsistemaoperativoWindows,tieneconosenelescritorioydespliega
ventanasquesepuedenmover,cerrarycambiardetamao.

1.8JSON
JSON, acrnimo de JavaScript Object Notation, es un formato ligero para el intercambio de
datos.JSONesunsubconjuntodelanotacinliteraldeobjetosdeJavaScriptquenorequiere
elusodeXML.
La simplicidad de JSON ha dado lugar a la generalizacin de su uso, especialmente como
alternativaaXMLenAJAX.UnadelassupuestasventajasdeJSONsobreXMLcomoformato
deintercambiodedatosenestecontextoesqueesmuchomssencilloescribirunanalizador
semntico de JSON. En JavaScript, un texto JSON se puede analizar fcilmente usando el
procedimientoeval(),locualhasidofundamentalparaqueJSONhayasidoaceptadoporparte
de la comunidad de desarrolladores AJAX, debido a la ubicuidad de JavaScript en casi
cualquiernavegadorweb.
Ejemplo:
(
{
"total":"2",
"results":[
{
"id_genero":"F",
"descripcion_genero":"Femenino"
},
{
"id_genero":"M",
"descripcion_genero":"Masculino"
}]
})

1.9jQuery
jQuery es una biblioteca oframework de JavaScript,creada inicialmente porJohn Resig, que
permite simplificar la manera de interactuar con los documentos HTML, manipular el rbol
DOM,manejareventos,desarrollaranimacionesyagregarinteraccinconlatecnologaAJAX
apginasweb.Fuepresentadael14deenerode2006enelBarCampNYC.

jQueryessoftwarelibreydecdigoabierto,poseeundoblelicenciamientobajolaLicenciaMIT
ylaLicenciaPblicaGeneraldeGNUv2,1permitiendosuusoenproyectoslibresyprivativos.2
jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en
JavaScript que de otramanera requeriran demuchoms cdigo, es decir, conlasfunciones
propiasdeestabibliotecaselograngrandesresultadosenmenostiempoyespacio.
Ejemplo:
<scripttype="text/javascript">
jQuery().ready(function(){
jQuery("#list1").jqGrid({
url:'server.php?q=1',
datatype:"xml",
colNames:['InvNo','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:"XMLExample"
}).navGrid('#pager1',{edit:false,add:false,del:false})
</script>

1.10Prototype
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
potencialesaprovechadoalmximocuandosedesarrollaconRubyOnRails.
ConlaWeb2.0lastcnicasdedesarrollodepginaswebnecesitabandarungransalto.Con
esto en mente naci la tcnica AJAX, que gracias a Prototype permite el desarrollo gil y
sencillodepginasWeb,estoenrelacinaldesarrollador,yproveealclienteunamanerams
rpida de acceder al servicio que solicita. Prototype es un Framework basado en JavasScript
orientadoaproporcionaraldesarrolladordetcnicasAJAXlistasparaserusadas.Elpotencial
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"eneldesarrollo.
Ejemplo:
varnombre=$F('nameUser')
varapellido=$F('surnameUser')
vardireccion=$F('directionUser')
varparam='name='+nombre+'&surname='+apellido+'&direction='+direccion
varurl='paginaReceptora.php'
varajaxRequest=newAjax.Request(url,
{
method:'get',
parameters:param,
asynchronous:true,
onComplete:showResponse
})

CAP.2.IntroduccinaExtJS
2.1Unpocodehistoria
ExtJSfue 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
puedeejecutarsecomounaaplicacinindependiente.

2.2QuesexactamenteExtJS?
ExtJSesunabibliotecaoconjuntodelibrerasdeJavaScriptparaeldesarrollodeaplicaciones
webinteractivas,usatecnologasAJAX,DHTMLyDOM.
ExtJS permite realizar completas interfaces de usuario, fciles de usar, muy parecidas a las
conocidasaplicacionesdeescritorio.Estopermitealosdesarrolladoreswebconcentrarseenla
funcionalidaddelasaplicacionesenvezdeenlasadvertenciastcnicas.

2.3ExtJSesasncrono
La programacin tradicional para Internet, o tambin llamada Web 1.0 ejecuta el cdigo en
sucesin,esdeciresperaaqueunalneadecdigosecompleteantesdeejecutarlasiguiente.
Al igual quela construccin de unacasa,los cimientosdeben sercompletadosantes de que
las paredesse puedan construir,a continuacin,las paredesdeben estarcompletas antes de
queeltechoseaconstruido.
ConExtJS,queesunaherramientatipoWeb2.0,podemosfcilmenteempezarporeltechode
lacasaantesqueloscimientosestnconstruidos.Esalgoascomoimaginarsequeeltecho
de la casa est siendo construido en una fbrica, mientras al mismo tiempo, se estn
construyendoloscimientosylasparedesycuandotodoestlisto,simplementesearmatodo
msrpido.

Estonospresentaotrascosasqueantesnosolamostener,ahorayanoestamosobligadosa
tomarelenfoquelneaporlneadeldesarrolloweb.
ExtJS nos ayuda a salir por medio de eventos y manejadores que podemos pegar a nuestra
funcionalidad.
Estamaneradehacerlascosassedenominaasincrona.

CAP.3.EmpezandoausarExtJS
3.1DescargandolalibreraExtJS

Sedebeingresaralsitiowww.sencha.com.
EscogerelframeworkExtJS.
HacerclicenelbotnDownloaddecolorverde.
Y para el curso vamos a bajar la versin Open Source haciendo clic en el botn
Downloaddecolorceleste.

3.2Dndeycmoinstalarlo?
ElpaqueteExtJS,noseinstala,yaqueesunSDKquecontieneunconjuntodearchivosque
comprendenlosrecursosqueExtJSnecesitaparacorreradecuadamente.Vienedentrodeun
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,
cambiemoselnombredelacarpetaaextjssimplemente.
ElSDKsecomponedelassiguientescarpetasyarchivosimportantes:
Tipo

Nombre

Descripcin

Directorio adapter

ArchivosquepermitenusarotraslibrerasdentrodeExtJS

Directorio docs

Ladocumentacincompletadetodosloscomponentesde
ExtJS(solocorreenunservidorweb)

Directorio examples Cientosdeasombrososytilesejemplos

Directorio pkgs

Paquetesadicionalesaloscomponentesoriginalesquelos
hacenmsfuertes,incluyetambinalgunosnuevos
objetos

Directorio resources

DependenciasdelaslibrerasdeExtJS,talescomo
archivosCSSeimgenes

Directorio src

ElcdigofuentecompletedeExtJS

Archivo

extall.css

EselarchivoCSSprincipaldeExtJS,eselencargadode
queloscomponentesseveantanbien

Archivo

extall.js

EslaliberaprimariadeExtJS

3.3DocumentacinExtJS
Dentro del paquete de libreras ExtJS, viene incluida la documentacin, a la cual podremos
accederdesdecualquierexploradorwebcolocandolasiguientedireccinlocal:
http://localhost/aplicacion/extjs/docs/
Aslatendremosamanoporcualquierdudaquesepresente.
Ejercicio:Explorardocumentacin

3.4Construyendoelproyecto

Dentrodelacarpetacreadaenhtdocs,aplicacion,vamosacrearlassiguientescarpetaspara
organizarmejornuestroproyecto:

imagenes
librerias
estilos

Finalmente vamos a crear un archivo en la raz de nuestra carpeta aplicacion, denominado

index.html, dentro del cualvamos a llamar alas libreras que son necesarias para que incluir
ExtJSenelproyecto:
<html>
<head>
<title>Aplicacion</title>
<!ExtCss's>
<linkrel="stylesheet"type="text/css"href="ExtJS/resources/css/extall.css"/>
<!ExtJS's>
<scripttype="text/javascript"src="ExtJS/adapter/ext/extbase.js"></script>
<scripttype="text/javascript"src="ExtJS/extall.js"></script>
<!MisJS's>
Espacioparacolocarnuestraspropiaslibreras
</head>
<body>
</body>
</html>

3.4.1LaprimeralibreraconExtJS
Dentrodelacarpetalibreriascolocadadentrodenuestraaplicacin,vamosacrearunarchivo
denominadohola1.js,conelsiguientecontenido:
Ext.onReady(function()
{
Ext.Msg.alert('Saludo','Holamundo!!!')
})
Llamamos a la librera hola1.js dentro de index.html, en el espacio que habamos reservado
paracolocarnuestraspropiaslibreras.
Ingresamosanuestraaplicacinpormediodelasiguientedireccin:
http://localhost/aplicacion/
Yestoesloqueaparece:

Analizandoelejemploactualtenemoslosiguiente:

Ext.onReady:EstafuncinhacequenuestrocdigoespereantesdequeelDOMest
disponible.EstosenecesitaporqueelJavaScriptempiezaejecutandotanprontocomo
esencontradoeneldocumento,momentoenelcualnuestroselementosDOMpodran
noexistir.
Ext.Msg:Esta eslafuncinprincipalusadaparalacreacindeunaalerta,yaquese
ocupadetodolonecesarioparateneruncuadrodedilogocompleto.

3.5Spacerimage
Antesde continuar,debemosproveeraExtJSconalgoquenecesita,unaimagen,queseha
denominado spacer image, debido a que ExtJS necesita tener la medida de un pxel por un
pixel transparente, para dar un ancho fijo a suscomponentes. Se debe indicarlalocacin de
estaimagenusandolasiguientelnea:
Ext.BLANK_IMAGE_URL='images/s.gif'
SiempresecolocacomoprimeralneadentrodeleventoonReady.
La idea de utilizar una spacer image, es porque la interface de usuario de ExtJS es creada
usandoCSS,peroelCSSnecesitaelementosHTMLfundamentalesparacrearelestiloqueles
da la apariencia actual a los componentes de ExtJS. El nico elemento HTML que tiene un
tamaoexactoyprevisibleentodoslosnavegadoresenunaimagen.Asqueestaimagenes
usadaparadefinirlaformacomoloscomponentessondibujados.EsascomoExtJSmantiene
lacompatibilidadconlamayoradenavegadoresweb.
Ejercicio:Aadirspacerimagealejemploanterior.

3.6Probemoslosidiomas

ExJSesmultiidioma,elidiomapordefaultesingls,paracambiarlosolonecesitamosaadirla
libreracorrespondientealidiomadeseado,esasqueparaespaolusaremos:
<!Libreradelidiomaespaol>
<scripttype="text/javascript"src="ExtJS/src/locale/extlanges.js"></script>

Estadeclaracindebecolocarseantesdelaslibreraspropias.
Ejercicio:Colocarlalibreraenelindex.htmlycorrerelejemploconlalibreraysinlalibrera
paraverquesucede.

3.7Algounpocomscomplicado
Vamosacrearunejemplomscomplicado,utilizandootroselementosdeExt.Msg,paralocul
creamos un archivo denominado pregunta.js en el directorio de nuestras librerias, con el
siguientecdigo:
Ext.onReady(function()
{
Ext.BLANK_IMAGE_URL='images/s.gif'
Ext.Msg.show(
{
title:'Javier',
msg:'Hasvistomicomputadora?',
buttons:
{
yes:true,
no:true,
cancel:true
}
})
})

Conestecdigocreamosuncuadrodedilogoconunttulodefinidoycuyomensajeprincipal
esunapregunta,ademslecolocamostresbotonescomoopcionesderespuesta.
El argumento pasado a onReady es una funcin, que puede ser pasada con un nombre
definido,ocreadaenlneacomoenestecaso.Estemtododecrearunafuncinenlnease
denominacomounafuncinannima,queesusadaparallamarunafuncinparticularsolouna
vez.
Si estuviramos usando una funcin que pueda ser reultizada, entonces deberamos definirla
deestaforma:
functionfDondeEsta()
{
Ext.Msg.show(
{
title:'Javier',
msg:'Hasvistomicomputadora?',
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.
Tambinsepuedenhacercambiosenlaconfiguracindeloscomponentes,colocandoestilos
propios. Y es posible incluir unafuncin para que se ejecute al hacer clic en los botones del
cuadrodedilogo,delasiguienteforma:
1. Se debe crear un archivo de estilos, denominado estilos.css en la carpeta estilos del
proyecto.
2. Colocarenelarchivounestilopropiocomoelsiguiente:
.personaicon{
background:url(../imagenes/ico_persona_flecha.gif)norepeat
}

3. Colocarelestilocreadoenlapropiedadicondelcuadrodedigolo:
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('Javierhizoclicen',btn)
}

3.8JSONyelobjetodeconfiguracin
Ennuestrosejemplos,hemosusadoalgoquesedenominaobjetodeconfiguracin,queesla
forma principal de hacer que ExtJS haga lo que nosotros queremos. Esto permite realizar la
configuracindelasdiferentesopcionesqueestndisponiblesparacualquierfuncinqueest
siendousada.

3.8.1Lamaneraantigua
Antes solamos llamar a las funciones con un set de argumentos predeterminados. Es decir
quedebamosrecordarelordendelosargumentoscadavezquelafuncinseausada.
varprueba=newFuncionPrueba('tres','argumentos','usados')

Estamaneraantiguadecrearlas funcionespuededarmuchosproblemas:

Requierequerecordemoselordendelosargumentos
Nodescribeloquecadaargumentorepresenta
Ofrecemenosflexibilidadparaaumentarargumentosadicionales

3.8.2Lanuevaformadeconfigurarobjetos
Usandoelobjetodeconfiguracin,tenemosunaltoniveldeflexibilidad,ysepuededecirque
nuestrasvariablesestnenunplanodescriptivo.Elordendelosargumentosnoimportams,
ya que el primero puede ser el ltimo o estar en medio. Con el mtodo del objeto de
configuracindepasarargumentosasusfunciones,losargumentosno necesariospuede ser
obviadosdeladeclaracin.
varprueba=newFuncionPrueba(
{
primeraPalabra:'tres',
segundaPalabra:'argumentos',
terceraPalabra:'usados'
})

Este mtodo tambin permite una expansin ilimitada de los argumentos de nuestras
funciones.Usandopocosoaadiendomsargumentos.Otragranventajadeusarelobjetode
configuracin es que el uso previo de las funciones no se ver afectado por el aumento o
disminucindelosargumentosenunusoposterior.
varprueba=newFuncionPrueba(
{
segundaPalabra:'argumentos'
})

varprueba=newFuncionPrueba(
{
segundaPalabra:'argumentos',
cuartaPalabra:'wow'
})

3.8.3Queselobjetodeconfiguracin?
SiseestfamiliarizadoconCSSoJSON,sepuede notarqueelobjetodeconfiguracinluce
similaracualquierdeestosdos,sobretodoporqueeslomismo.Elobjetodeconfiguracines
solounaformadeestructurardatosquepuedeserfcilmenteinterpretadaporloslenguajesde
programacin,enestecasoJavaScript.
Porejemplo,veamoslaporcindelaconfiguracindelnuestroejemplo:
{
title:'Javier',
msg:'Hasvistomicomputadora?',
buttons:
{
yes:true,
no:true,
cancel:true
},
icon:'personaicon',
fn:function(btn)
{
Ext.Msg.alert('Javierhizoclicen',btn)
}
}

La configuracin particular que estamos usando aqu podra parecer completa a primervista,
perounavezquelaconocemos,seconvierteenunaformaextremadamentefcildeconfigurar
componentes.CasitodosloscomponenesdeExtJSutilizanelobjetodeconfiguracin,asque
es algo que se nos tiene que volver familiar. El objeto de configuracin se volver nuestro
mejoramigo.
Aqu se detallan algunos puntos importantes que hay que recordar cuando se trabaja con el
objetodeconfiguracin:

Se deben colocar llaves para identificar el conjunto de registros, que simboliza los
registrosdentrodeloscorchetescomopartedeunobjeto>{registros}.
Cada registro se compone de un par nombre/valor, separados por dos puntos, y
separadosporcomasentreellos>{nombre0:valor0,nombre1:valuor1}.
Losvaloresdelregistropuenteserdecualquiertipodedato,incluyendobolean,array,
function,ocualquierotroobjeto>{nombre0:true,nombre1:{nombre2:valor2}}.
Los corchetes definen un arreglo > {nombre:[uno,dos,tres]}. Un arreglo puede
tambincontenerobjetosconregistros,valoresocualquiernmerodeotrascosas.

La mayor ventaja de usar JSON para configurar nuestros componentes, es que si nosotros
necesitamosmsopciones,podemosempezardigitndolasylisto.Contrarioalatpicallamada
aunafuncin,elordendenuestrasopcionesdeconfiguracinllegaaserirrelevante,ypuede
haberpocosotantosargumentoscomoseannecesarios.

3.8.4ComofuncionaJSON
Todo se basa en la funcin eval , que es la que JavaScript usa para interpretar una cadena
JSON,yconvertirlaenobjetos,arraysyfuncionesquepuedenserusadas.

3.9Modificandoelejemploanterior
Vamos a abrir nuestro ejemplo pregunta.js y vamos a grabar como pregunta2.js y vamos a
aadirlefuncionalidadacadabotndediferentemanera:
fn:function(btn)
{
switch(btn)
{
case'yes':
Ext.Msg.prompt('Javier','Dndeest?')
break
case'no':
Ext.Msg.alert('Javier','Voyaquemareledificioahora!')
break
case'cancel':
Ext.Msg.wait('Grabandoaldisco','Copiadearchivos')
break
}
}

EnesteejemplovemoslosdiferenteselementosdeExt.Msg,
CuandosedaclicenelbotnSi,sedespliegaundilogotipopromptquepermiteingresarun
solovaloryesunelementoestndarencasitodaslasinterfacesdeusuario.

Cuando sedeclicenNosedespliegaunaalerta,parecidaalaalertaestndardelJavaScript
peroconesteroides.

Al hacer clic en el botn Cancelar (o presionar la teclaEscape) se despliega un mensaje de

esperausandounabarradeprogreso.

La barra de progreso que estamos usando puede ser controlada y desaparecer cuando el
procesosehayaculminado.Paraesteejemplosequedaejecutandosinfin.

3.9.1Encendiendoelfuego
Ahora,vamosaempezarcausandoalgunasreaccionesennuestrapgina,basndonosenlas
respuestas de los usuarios a los dilogos. Dentro de nuestra sentencia switch, para el botn
Si colocaremos untercer argumento en lafuncinprompt que se ejecutarcuando el botn
Aceptarseapresionado.Vamosavalidareltextointroducidoeneldilogodelprompt,sies
igualaenlaoficinasepresentareltextoNoestah,casocontrarioseimprimireltexto
introducido.
NecesitamoscolocarunDIVenelcuerpodelapgina
<divid='my_id'style='width:100%height:100%overflow:hiddentextalign:center'></div>

Yelsiguientecdigoenelcase:
case'yes':
Ext.Msg.prompt('Javier','Dndeest?',function(btn,txt)
{
if(txt.toLowerCase()=='enlaoficina')
{
Ext.get('my_id').dom.innerHTML='Maltrabajo'
}
else
{
Ext.get('my_id').dom.innerHTML=txt
}
Ext.DomHelper.applyStyles('my_id',
{
background:'transparenturl(imagenes/computadora.gif)50%50%norepeat'
})
})
break

Para el caso del No, se desplegar una alerta, que tambin cambia el estilo del documento
cuandoelbotnespresionado.
case'no':
Ext.Msg.alert('Javier','Voyaquemareledificioahora!',function()
{
Ext.DomHelper.applyStyles('my_id',
{
'background':'transparenturl(imagenes/fire.png)0100%repeatx'
})
Ext.DomHelper.applyStyles(Ext.getBody(),
{
'backgroundcolor':'#FF0000'
})
Ext.getBody().highlight('FFCC00',
{
endColor:'FF0000',
duration:6
})
})
break

Analizandoelejemplo,podemosverlosiguiente:

Podemosenviarcomoparmetrounafuncin
Ademsvemoslautilizacindevariassentenciascomo:
o Ext.get() > Este mtodo permite el acceso a cualquier elemento del documento
HTMLcolocandocomoparmetrosuIDypermitemanipularlo,comohemosvisto
enelejemplo.
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
utilizandofragmentos de HTML.Tambintienela habilidad de crear plantillasde
fragmentosHTML,apartirdelaconstruccindesuDOM.
o Ext.getBody()>RetornaelbodyactualcomounelementodeExtJS.

CAP.4.PanelsyTabPanels
4.1Panel
ElPanelesuncontenedorquetieneunafuncionalidadespecficaycomponentesestructurales
que lo hacen el perfecto bloque de construccin para aplicaciones orientadas a interfaces de
usuario.

4.1.1ElaboracindePanels
TodosloscomponentesdeExtJStienensudeclaracin,susmtodosypropiedades,paracuya
definicinseutilizaelobjetodeconfiguracinantesrevisado,enelcasodelPanelseconfigura
delasiguientemanera:
1. Creamosenlacarpetalibreriasdenuestroproyectounarchivoquesellamepanel.js
2. CreamoselPaneldirectamenteasignandoelobjetoaunavariableusandolallamada
almtodocreadorExt.Panel().
3. Alobjetocreadolecolocamoslassiguientespropiedades:
a. Ttulo
b. Ancho
c. Alto
d. Ylomsimportante,dondevaaubicarse,paraellodebemosusarlapropiedad
applyTo,ya que este panel podr ser el contenedor de otros objetos, ms no
estcontenidodentrodeotrocomponente,siasfueranonecesitaramosesta
propiedad.
4. En el index.html llamamos en las libreras propias, solamente al archivo panel.js y
corremosnuestraaplicacin.
Ejercicio:Aadirmspropiedades.

4.2TabPanel
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
pestaasseparadas,estaspestaaspuedencolocarsetantoarribacomoabajodelpanel.

4.2.1ConstruyendonuestroprimerTabPanel
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
componentedeExtJSdentrodeotro,lopodemoshacerdedosformas:
1. Asignandoelobjetoocomponenteaunavariableycolocandoestavariablecomoitemo
componentedeotro,comoyahemosvisto.
2. Realizando una creacin interna sin asignar a una variable y para hacer referencia a
esteobjetoencualquierotrolugarusaremossuID.
Para ello vamos a usar el ejemplo que ya tenamos de la creacin del Panel y seguir los
siguientespasos:
1. Lovamosarenombrarcomotab_panel.js.

2. ColocamoselTabPanelcomoitemdelpanel.
3. Cambiamoslalibrerallamadaenelindex.htmlycorremoslaaplicacin.
Lapropiedaddeconfiguracinitems,esun arrayde objetosquedefinecadauno delostabs
contenidos en este TabPanel. El ttulo es la nica opcin que obligadamente necesita ser
colocadaparavisualizarcorrectamentecadatab.
Tambin necesitamos colocar un tab activo con la propiedad activeTab, que es cero para
nuestroTabPanel.Esteeselndicedelostabsenelpanel,deizquierdaaderechaempezando
a contar desde cero. Esto le indica al TabPanel que el tab de la posicin cero debe hacerse
activopordefecto,delocontrario,resultaraenunpanelenblancohastaqueelusuariohaga
clicenunapestaa.
Ejercicio:ColocarlassiguientespropiedadesdeconfiguracinalTabPanelyverquesucede:

closable
disabled
tabPosition

4.2.2ManejodeTabs,mtodosquedebesconocer
Tenemosalgunos mtodosespecialesparaelmanejodetabs,queson:

add(array objeto de configuracin ): Aade dinmicamente un tab al contenedor, como

parmetrosecolocaelobjetodeconfiguracindeseadoparaelnuevoelemento.
setActiveTab(String/Number item ): Coloca un tab especfico como activo, para ello hay
queenviarcomoparmetroelndicedelelementodeseado.
getActiveTab():Retornaeltabactivoactual.
show(): Muestra fsicamente en el contenedor, un elemento recin aadido o que se
encuentreoculto.
hide():Ocultasolamentelapestaadeltab,noelcuerpo,paraellohayqueutilizarel
mtodohideTabStripItem.Esmuytilparacuandosecolocalacaractersticaclosable:
true,debidoaquecuandosecierraunapestaaelobjetoseautodestruye,sisevuelve
anecesitareltabhayquevolveracrearloyestoesunpocomspesado,porloquese
debeprogramareleventobeforemoveyhacerquesoloseoculte,noseautodestruya.
hideTabStripItem(Number/String/Panelitem ):Ocultaelcuerpodelapestaa.

Estosmtodoslosveremosejecutadosjuntoconlayoutsyregions.

CAP.5.Viewports,layoutsyregions
5.1.Viewports
ElViewportesuncontenedor(seheredadelaclaseContainer)queens,tieneunaestructura
igualquecualquierotrocontenedor,perotieneunlugarespecialdentrodeExtJS.ElViewport
representaeltotaldelasuperficievisibleparaelusuario,loquesignificaqueeslaventanadel
navegador en otras palabras (o para ser ms precisos, la porcin donde se ejecuta un sitio
web,tpicamentellamadoventanadelnavegador).
Cuando se crea un Viewport automticamente se coloca dentro del <body> del documento
cargadoenelexploradoryseacomodaparaocupartodalaventanadelnavegador.Tambin
est al tanto de los eventos de cambio de tamao de la ventana del explorador que puedan
ocurriryreaccionaapropiadamente.Porestarazn,solopuedeexistirunViewportporpgina.
El Viewport est dotado con una estructura especfica de diseo, puede ser BorderLayout,
CardLayoutoloquesea,porejemplo:
newExt.Viewport(
{
layout:"fit",
items:[
{
title:"Ventanadelnavegador",
bodyStyle:"backgroundcolor:#999999",
html:"Algncontenido"
}]
})

5.2Layouts
Un layout transforma cualquier contenedor en unaverdadera aplicacin web. Los estilos ms
ampliamenteusadospuedenserencontradosensistemasoperativoscomoMicrosoftWindows,
queutilizaborderslayouts,regionesdetamaovariable,acordeones,tabsycasitodoloquese
puedaimaginar.
Paramanteneraparienciaconsistenteentodoslosnavegadores,yparaproveercaractersticas
comunes de interfaces de usuario, Ext JS tiene un poderoso sistema de manejo de layouts.
Cadaseccinpuedesermanejadaypuedesermovidaoescondida,ypuedenaparecerenun
clic,cuandoydondesenecesite.

5.2.1FitLayout
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
contenedoressecolocaeltipodelayoutenlapropiedadcorrespondiente.
Curiosamente, FitLayout no tiene sus propias propiedades de configuracin, adems de las
quehereda.CuandosenecesitetenerunPanelquelleneelcontenedorentero,FitLayoutdebe
serusado.Todoloquesenecesitaescolocarelatributolayoutenelcontenedorpararellenar.

5.2.2BorderLayout

Un BorderLayout es relativamente un layoutmuy simple que tambin es de uso muy comn,

talvezelmspopular.Eseesunlayoutquetienecincoregiones:

unaalolargodetodalapartesuperiordelapgina,
otraenelladoizquierdo,
otraenelladoderecho,
otraenlapartedeabajo
yotraentretodaslasdemsenelmedio.

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.
SibienhaycincoregionesdisponiblesenelBorderLayout,noesnecesarioqueseusentodas.
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
creaelBorderLayout.
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
BorderLayoutparaorganizarestecontenedor:
varviewport=newExt.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'
}]
})

Sitodosalibien,veremosalgocomolosiguiente:

Ahoratenemosunlayoutconcincoregionesdefinidas.Estasregionespuedencontenerotros
componentes,sinproblemas.Comoalternativacadareginensimismapuedeserdivididaen
ms regiones anidadas, por ejemplo la seccin del centro puede ser dividida horizontalmente
paratenersupropiareginsur.
Ejercicio:Hacerquelasregionespuedacambiarsedetamaoosepuedancontraer.

5.2.3Accordion
ElAccordionesenciertomodosupropiocomponente.Enotraslibrerasrealmenteloes,pero
enExtJSesuntipodelayout(esliteralmenteunaextensindeFitLayout).Enpocaspalabras,
un Accordion es una sola capa en la que se tienen diferentes paneles que pueden ser
seleccionadosporelusuario.Estospanelesestnapiladosverticalmente(aunquehayalgunas
implementaciones que permiten hacerlo horizontalmente tambin) y usualmente incluye un
bonitoefectoanimadocuandoseseleccionaunodeellos.Porejemplo:

UnejemploquecreaunAccordionpuedeser:
varpanel=newExt.Panel(
{
title:'Miprimeracorden',
layout:'accordion',
height:400,
collapsible:true,
layoutConfig:
{
animate:true
},
items:[
{
title:'Panel1',
html:'YosoyelPanel#1'
},
{
title:'Pane2',
html:'YosoyelPanel#2'
},
{
title:'Pane3',
html:'YosoyelPanel#3'
}]
})

AqusecreaunainstanciadeExt.Panel,conunlayouttipoAccordion.Seespecificaelaltoyse
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
efectoelmomentodeseleccionaralgnpanel.

5.2.4CardLayout
ElCardLayoutesuntipodeFitLayoutconesteroides,yaquepermitetenermltiplespaneles
adaptadosaloscontenedores,pero solamentepermitemostrarunoalavez.Interfacescomo
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
mostrarunnuevopanelenelCardLayoutyaseaporsucdigoporelvalordelndice.Esteest
completamentebajoelcontroldelprogramador,elCardLayoutnopuedeintercambiarseentre

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
comoeselcasodelAccordion.
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.Estaesunabuenaopcindeconfiguracinparaquelacargaseaeficiente.Ejemplo:
varpanel=newExt.Panel(
{
title:'MiPrimerCardLayout',
layout:'card',
height:400,
id:'myCardLayout',
activeItem:0,
items:[
{
title:'Panel1',
html:"Hola,soyelPanel#1<br><br>"+
"<inputtype=\"button\"value=\"Clicparacambiaralpanel#2\""+
"onClick=\"Ext.getCmp('myCardLayout')"+
".getLayout().setActiveItem(1)\">"
},
{
title:'Panel2',
html:"Hola,soyelPanel#2<br><br>"+
"<inputtype=\"button\"value=\"Clicparacambiaralpanel#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 enla 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
onClickdelbotndentrodelcualsecolocacdigopropiodeExtJS.

5.2.5TableLayout
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
podamosquerer.
UnagrandiferenciaentrecrearunlayoutusandoTableLayoutyusandotablasconHTMLplano
esqueconTableLayoutesqueyanonospreocupamosdelastablasyfilasdeformaexplcita.
Nohayquepreocuparsedelasceldasconfilasninadaporelestilo.Todoloquehayquehacer
esespecificarelnmerodecolumnasqueelTableLayoutdebeteneryentoncesaadirobjetos
encadauno,dederechaaizquierda,dearribahaciaabajo.ElTableLayoutsedarcuentade
laposicindecadapanelbasndoseenlacuentadefilas,ademssepodrcolocarcualquier
tamao de fila y columna que se necesite. Si se est acostumbrado a la creacin de tablas
HTML,utilizandoTableLayoutpuedeserunpocodifcildeentenderparael cerebro,perouna
vezquelohace,rpidamente,unosedacuentadelaflexibilidadqueofrece.Ejemplo:
varpanel=newExt.Panel(
{
title:'MiprimerTableLayout',
layout:'table',
height:400,
layoutConfig:
{
columns:2
},
items:[

{
html:'Columna1,Celda1',
width:200,
height:200
},
{
html:'Columna2',
rowspan:2,
width:200,
height:400
},
{
html:'Columna1,Celda2',
height:200
}]
})

5.2.6AnchorLayout
UnAnchorLayoutesunlayoutquepermitequeloselementoscolocadosenuncontenedorse
acoplenunosconotros.Enotraspalabras,sielcontenedorcambiadetamao,yaseaporque
el contenedor mismo cambia de tamao o indirectamente del resultado del cambio de su
contenedorprincipal,entoncestodosloselementosdentrodelseacoplanalnuevotamaoy
lomsimportanteseredimensionan,deacuerdoalasreglasqueseconfiguren.

Enestafigurasepuedeverquealcambiardetamaoalaventana,loscomponentesadentro
tambincambiandetamao.Ejemplo:
varventana=newExt.Window(
{
resizable:true,
layout:"anchor",
title:"MiPrimerAnchorLayout",
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()

Enestecasotenemosdoscamposdetextoyunreadetexto.Enlaventanaseespecificael
atributolayoutcomoanchoryencadaelementotambin.Elvalordeesteatributoessiempre
enlaformaxxyydondexxeselvalordeanclajehorizontalyyyeselvertical.
Trestiposdevalores son soportadosaqu,Elprimeroesunporcentaje.Asqueen elcdigo
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
configurartambinunsolovalorqueespecificaelaltoyelanchoautomticamente.
Sepuedetambinespecificarunvalordedesplazamientoparaelatributoanchor.Estepuede
serpositivoonegativo.Elprimervaloresundesplazamientodesdeladerechadelcontenedor,
yelsegundodesdeabajo.As,sielatributoanchorparaelreadetextofuera2575,indica
quesedebedibujarelitemalanchocompletodelaventanamenos25pixelsyelaltocompleto
delaventanamenos75pixels.Aligualqueconporcentajes,ensulugarslopuedeespecificar
unvalornico,yquesetomarcomoelderechodecompensacin,conelfondocompensado
pordefectoa0.
Sepuedetambinespecificarunvaloranchorparaderecha,or,otroparaabajoob.Paraque
esto haga algo, sin embargo, el contenedor debe tener un tamao arreglado o debe ser
configuradalapropiedadanchorSize.
Tambinsepuedemezclarambostiposdevalores,porejemplounvalorde1080%significa
queelelementodebeserdibujadoalanchocompletodelcontenedormenos50pixelsdesdela
derechayal80porcientodelaltodelcontenedor.

CAP.6.Ventanasydilogos
6.1Elayeryelhoyconventanas
Entiempospasados delaweb,losusuariosdelos sistemastradicionalespasaransutiempo
ingresando datos en listas y formas. Escogiendo tems de una lista de rdenes de compra,
luegonavegandohacialosdetallesunayotravez.Elproblemaesqueestamoshablandode
cientosdeentradasenunalistayvariosdetallesenlasformas.Lomsprobableeraque,enel
ejemplo anterior de rdenes de compra, se necesita ms subformas para mostrar toda la
informacinqueestdisponibleycadavezqueelusuariosemueveaotrapantallasetenga
querefrescarlapginacompletaytraertodoslosdatosdenuevodelabasededatos.
HoyconlosobjetosyherramientasqueExtJSnosprovee,podemosrealizarunmejortrabajo,
tantoenpresentacinyobtencindedatoscomoenvelocidaddeaccesoalaspantallas.
Otra parte importante del rompecabezas que nos permite hacer esto son las ventanas y los
dilogos,yaquenospermitenpresentarcualquierclasedeinformacinsinforzaralosusuarios
anavegaraotraspantallas.

6.2Dilogos
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
sistemayelusuariocreandounainterfazamigableycmoda.
TodoslosdilogosdeExtJSsetomandelaclaseExt.MessageBoxoconelaliasExt.Msg.

6.2.1Alert
Ext JS nos provee con un excelente reemplazo a las alertas simples de JavaScript. Con la
siguientelneadecdigoveremoscomofunciona:
Ext.Msg.alert('Hey!','Algopasa!')

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
especificaelcuerpo.Loquesedespliegaalejecutarelcdigoanteriores:

Comosepuedever,sufuncionamientoeselmismoquelaalertaestndarperotieneunamejor
apariencia y es ms verstil. Podemos tambin transmitir ms informacin con la barra del
ttulo.MostrarMsg.alertnodetienetemporalmentelaejecucindelscriptcomolohacelaalerta
normalhayqueserconcientesdeestocuandoseusalaversindeExtJS.
Tambin hay que tomar en cuenta que se puede usar solo un Ext.MessageBox al mismo
tiempo.Sisetratadeenviardosalmismotiempo,elprimeroserreemplazadoporelsegundo.

6.2.2Prompt
Otro componente tipo dilogo esExt.Msg.prompt. Este nos permite capturar una simplelnea
de texto de lamismaforma que el prompt estndar de JavaScript. Sin embargo, en lugar de
limitarseadevolverunvalor,nosdaalgunasopcionesms.
Ejemplo:
ConJavaScriptestndar:
<scripttype="text/javascript">
vardata=prompt('Dimealgo')
alert(data)
</script>

ConExtJS:
Ext.Msg.prompt('Hola!','Dimealgo',function(btn,text)
{
if(btn=='ok')
{
vardata=text
Ext.Msg.alert('Tdigiste:',data)
}
else
Ext.Msg.alert('Ohh','Nohasqueridodecirnada')
},this,false,'')

Unavezms,Msg.prompt permite pasar un ttulo como el primer argumento, y elcuerpo del

textoeselsegundo.Eltercerargumentoesunafuncindedevolucindellamadaocallback
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
textoquefueingresadoporelusuario.
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
ampliaparaelprompt.

6.2.3Confirmation
El dilogo de confirmacin permite al usuario escoger entre una accin de confirmacin o
rechazoaalgunaaccin.Elcdigoeselsiguiente:
Ext.Msg.confirm('Hola!','Estdeacuerdo?',function(btn,text)
{
if(btn=='yes')
{
Ext.Msg.alert('Bien','Mealegromucho')
}
else
{
Ext.Msg.alert('Estbien','Nohayproblema')
}
})

Denuevousamos,unttulo,untextoenelcuerpoyunacallbackfunctioncomoenelprompt.
UnainteresantediferenciaconlaconfirmacinestndardeJavaScriptesquedalasopciones
deAceptaryCancelarynosoloSiyNo.

6.2.4Progress
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,estenoestdiseadoparaser usadoindependientementecomo
los otros dilogos, y no necesita accin del usuario. De hecho, se puede disparar de la
siguienteforma:
Ext.Msg.progress('Hola!','Estamosesperando...','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,igualqueenlosanteriorestiposdedilogos,mientrasqueelterceroeseltextoque
aparecerenlabarradeprogreso.
Asqueparanoesperareternamente,debemosactualizarelmovimiento,paraesonosayuda
elmtodoExt.Msg.updateProgress,creadosoloparaestepropsito.Acontinuacinunejemplo
desuuso:
varcount=0
varinterval=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
milisegundosatravsdeuntemporizador,eincrementaelprogresousandolavariablecount
cada vez. El primer argumento de este mtodo es un valor entre cero y uno, con cero
representamoselinicioyconunorepresentamoselfin,elsegundopermiteactualizareltexto
delabarradeprogresoyelterceropermitecambiareltextodelcuerpodelmensaje.Actualizar
eltextopuedesertilsisedeseaproveerdeinformacinadicionalalusuario,oparamostrarla
representacindelporcentajecompletadodelprocesoactual.
Regresando al ejemplo, ntese que se hace referencia tambin aExt.Msg.hide, con elfin de
limpiarlabarradeprogresodelapantalla,yaqueelmtodoupdateProgressnomanejaesto,
inclusosiseestableceelprogresoactualaunvalordemsdeuno.

6.2.5Show
Loscuatromtodosanteriores paracreardilogos, sonenesenciaaccesos directoshaciaun
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.Laformamssimpledeestemtodoes:
Ext.Msg.show(
{
msg:'IMPRESIONANTE.'
})

EstaesunarplicamscercanaalaalertaestndardeJavaScript,peronoesfuncional,algo
mejorsera:
Ext.Msg.show(
{
title:'Hola!',
msg:'IconosyBotones!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.

Laformadeconfigurariconosybotonesesinteresante,sepasaunadelasconstantesqueExt
JSproveeysepuedetenerunbotnpreconfiguradootambinsepuedeunautilizarunaclase
CSSquemuestreunicono.Lalistadeconstantesparaiconoses:

Ext.Msg.ERROR
Ext.Msg.INFO

Ext.Msg.QUESTION
Ext.Msg.WARNING

Ylasconstantesparabotonesson:

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
claseselaboradasconCSS.Porejemplo,Ext.Msg.QUESTIONtienepordetrslaconfiguracin
extmbquestion,quenoesmsqueunaclaseconfiguradadeCSS.Estoseencuentraenlas
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
personalizacindelasreasparaiconos.
Las constantes de botones son un poco menos flexibles, y contienes objetos literales
especificando como deben ser desplegados. Por ejemplo, Ext.Msg.YESNOCANCEL contiene
losiguiente(representadoenJavaScriptObjectNotationparafcillectura):
{cancel:true,yes:true,no:true}

Estoespecificaquelosbotones,yes,cancelynodebenserincluidos.Sepuedeusarestopara
apagarunbotnuotro,peronosepuedecambiarelordenenelqueaparecen,debidoaque
esunestndar.
Sinembargo,podemosajustarlosdilogosdeotrasmaneras.Esposiblecolocardimensiones
a un cuadro de dilogo, alto y ancho.Este puede ser til en situaciones donde se tenga que
desplegarunmensajemuygrandeysedebaevitarqueseextiendaalolargodelapantalla.
Elcuadrodedilogoshow,ysuobjetodeconfiguracinpermitenlaopcinclsparaespecificar
unaclaseCSSparaaplicaralcontenedordeldilogo.Undesarrolladorpodrausarestopara
remarcarcualquierobjetodelcontenedorusandoreglasCSS.

6.2.6ComportamientogeneraldeShow
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
propiedadprogress,entoncessepuedereplicareldilogoestndardeprogresodeExtJS:
Ext.Msg.show({progress:true})

Medianteelusodeesteconjuntodeopcionesconotrascomottuloycuerpodemensaje,se
puedecrearcuadrosdedilogobastantepersonalizados.
De forma similar, el prompt y las opciones de multilnea permiten la creacin de cuadros de
dilogodeentrada:
Asquesepuedecrearuncuadrodedilogoqueaceptemltipleslneasdeingreso.Peropor
omisinelvalormultilneaesfalso,sepuedelimitarelcuadrodedilogoaunasolalnea,etc.
Sepuedehacercuadrosdedilogodeentradamuypersonalizados.
Otraopcinquecambiaelcomportamientopordefectodeuncuadrodedilogoesmodal.Esta
opcinpermiteespecificarsielusuariopuedeinteractuarconloselementosqueestndetrs

de la ventana emergente. Cuando se establece en true, se coloca un recubrimiento

semitransparenteparaevitarlainteraccin.
Comohemosvistoantes,loscuadrosdedilogodeExtJS,nobloqueanlaejecucindelscript,
comosucedeenJavaScript.Estosignificaquesepuedenusarcallbackfunctionsparadisparar
cdigo despus de que el dilogo es cerrado. Podemos hacer esto usando la opcin de
configuracinfndeshow,queesllamadacondosargumentos,elcdigodelbotnquehasido
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,peroestafuncinproporcionadeformaconsistentetodalagamadecuadrosdedilogo
quepuedensercreadosutilizandoExt.Msg.show.

6.3Ventanas
Cualquier usuario de computadoras esta familiarizado con el concepto deventanas 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
poderosocomponentequesoportavariosavanzadosescenarios.

6.3.1Empezando
Sepuedeabrirunaventanausandounapequeacantidaddecdigo:
varw=newExt.Window(
{
height:100,
width:200
})
w.show()

Corriendoestecdigoseobtieneunaventanavacaqueensimismaescompletamenteintil,
pero esto muestra algunas de las caractersticas predeterminadas de Ext.Window. As, sin
ningunaconfiguracin,laventanasepuedearrastrarysepuedeajustarentamao,ademsse
tiene un til icono para cerrarla en la esquina superior derecha. Todava no es una
demostracinmuyimpresionante,sinembargo,porquenuestraventanaenrealidadnomuestra
nada.
LaformamsfcilderellenarunaventanaesconelviejoyplanoHTML.Porejemplo:
varw=newExt.Window(
{
height:150,
width:200,
title:'UnaVentana',
html:'<h1>Ohhh</h1><p>Holaatodosdesdeaqu</p>'
})
w.show()

Se han aadido dos nuevas opciones de configuracin aqu. La primera es un ttulo que
permitecolocaruntextoenlabarra superiordelaventanayla segundapermiteaceptaruna
cadenaHTMLquedespliegauntextoenlaventana.

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
permitemodificarnuestraventanajustocercadelnivelmarcadoyproporcionarcientosdeCSS
paraengancharelestilo.Anas,estonoesloqueseesperallegaratenerconExtJS.Hay
muchasotrasopcionesquepermitirnllegaralodeseado.

6.3.2Unpanelconpotencia
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
objetosdeconfiguracinuotrasinstanciasdecomponentes:
varw=newExt.Window(
{
items:[
{
xtype:'textfield',
fieldLabel:'Nombre'
},newExt.form.TextField(
{
fieldLabel:'Apellido'
})]
})
w.show()

En el ejemplo de arriba, se han aadido dostextfields, el primero usando inicializacin lazy

conxtypeyelsegundousandounainicializacinestndar.Estosdostemssernaadidosal
panelinternodelaventana,perolamaneraenlaquesondesplegadospuede sercontrolada
conlapropiedadlayoutdenuestraventana.

6.3.3Layout
Ext JS define un nmero de modelos de layout dentro del paquete Ext.layout y cada uno de
estospuedeserconunpanelparapermitirqueloscomponentesdentrodelseandispuestos
deunamaneraespecfica.Enelejemploanterior,seaadierondoscajasdetextoalaventana,
peropodemosmejorarlaaparienciadelaventanasimplementeusandoellayoutapropiado.En
este caso, necesitamos Ext.layout.FormLayout, que proporciona soporte para etiquetas y el
espaciogeneralyelposicionamientoesperadoparaunaformaconcamposeditables:
varw=newExt.Window(
{

layout:'form',
items:[
{
xtype:'textfield',
fieldLabel:'Nombre'
},newExt.form.TextField(
{
fieldLabel:'Apellido'
})]

})
w.show()

Usando la opcin de configuracin layout, para especificar que se desea tener un panel tipo
form,sepuedeapreciarinmediatamenteladiferencia:

EstanoesunacaractersticadeExt.WindowyaqueprovienedelasuperclasePanel.Peroel
hechodequeunaventanasoporteestacaractersticaesextremadamenteimportanteparaun
desarrollador de aplicaciones, especialmente si tenemos en cuenta cunto tiempo tomara
crearunaformaricaconlatcnicadeinyeccindecdigoHTML.Lasotraslayoutsdentrodel
paqueteExt.Layout,proporcionanmuchosmsenfoquesdediseoyexpansindeescenarios
queunaventanapuedesoportar.
Ademsparalasvariasmanerasderellenarunreadecontenidodeunaventana,tambinse
tieneunagranflexibilidadcuandosetratadelaaparienciayelcomportamientodeuncuadro
dedilogo.Haymuchasopcionesdeconfiguracinproporcionadosporlajerarquadelasuper
clase Ext.Window, que empiezan con el Ext.Panel, al mismo tiempo que tiene una gran
cantidaddeopcionesdeconfiguracinpropias.

6.3.4Limpiandoventanas
En nuestro primer ejemplo de ventanas, se demostr que se tiene un gran nmero de
caractersticasparareajustar,arrastrarlibrementeyademssetieneunbotnparacerrar.Ya
dentrodeunaaplicacin,puedenhaberventanasconestrictosdiseosdeconfiguracin,yno
necesitan ser reajustables, por lo que se puede evitar este comportamiento seteando elvalor
false en la propiedad resizable. A menudo arrastrar, tambin es solo una cuestin de
preferencia,yenmuchoscasosdejaractivadaestapropiedadpuedecausardaoyseramejor
deshabilitarla.Loquequieredecirquehayvecesenlasqueno esnecesariamentefuncional,
paramostrarcomo,tenemoselsiguienteejemplo:
varw=newExt.Window(
{
height:50,
width:100,
closable:false,
draggable:false,
resizable:false
})
w.show()

Cuando se usaunaventanatipoforma,amenudoespreferibledisponerdebotones detexto

paraexplicarlasdiferentesacciones,porejemplo,sepuedegrabarunregistroocancelaralgn
cambio que haya sido realizado y en algunos casos, el botn cerrar puede ser deshabilitado,
colocandolaopcinclosableafalse.Hayunasegundaopcinquedaunpocomsdecontrol
sobreestecomportamiento:closeActionpuedeserconfiguradaparacuandodeseamosocultar
y no cerrar nuestra ventana, con hide simplemente se hace que desaparezca la ventana,
mientrasqueconclose,seremuevelaventanadelDOM.Estaesunaimportantediferenciasi

sedeseareutilizarlaventanadespus,yaqueesconderlaventanaparamostrarlacuandose
necesiteesmseficientequerecrearlacadavez.

6.3.5Losextras
Conlasopcionesdeconfiguracinbajocontrol,sepuedenrevisarlasmanerasenlasque se
puedemodificaryaumentarlascaractersticasdelaExt.Window.Yasehademostradoeluso
de las opciones height y width, para configurar las dimensiones de la ventana y recortar
cualquiercontenidoqueexcedaestasdimensiones.
SetienentambinotrasopcionescomoautoheightyautoWidth,querecibenvaloresbuleanos,
quepermitenrellenarlaventanaconcomponentessintenerquepreocuparsedeasegurarque
losvaloresdeanchoyaltoseansiemprecorrectos.Estoesrealmentetilduranteeldesarrollo,
cuandoespocoprobablequesetenganencuentalasdimensionesexactasdeloqueseest
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
ventananoexcedernlosladosdelapantalla.

6.3.6Funcionandodentrodeunescritorio
Elejemplomsgeneralizadodeunsistemadeventanaseselquenosmuestraunescritoriode
computadora, con varias ventanas que representan aplicaciones o elementos del sistema de
archivos.Endichossistemas,losusuariospuedenesconderventanasparausarlasdespus,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.Windowatravsdelasopcionesdeconfiguracinmaximizableyminimizable.
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
iconosenlapartesuperiorderechadelaventanadeformasimilaralasventanasdelsistema
operativoMs.Windows.Lapropiedadmaximizablepermitequelaventanaseexpandayllene
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,queenelcasodelsistemaoperativoMs.Windowsseraalabarradetareas,pero
para otros sistemas operativos podra ser en otro lugar. Por lo que se debe programar la
funcionalidaddeminimizaramano,ExtJSproveesolouniconoparaelminimizadoyelevento
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.7Otrasopciones
La clase Ext.Window, tiene otros medios para cambiar el estado real de las ventanas, y est
integrado todo dentro delframework. La propiedad buleanacollapsible, aade otro botn a la
partesuperiorderechadelaventanaypermitealusuarioencogerlaparaquesemuestresolo
labarrasuperior.Unsegundoclicexpandelaventana,regresndolaasuestadooriginal.

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
tradasdevuelta.
Ademsdelabarradettuloestndaryelreadecontenidodelcuerpo,sepuedeaadirms
reas de contenido a una ventana. Algunas de estas reas pueden ser completamente
personalizadas,yalgunassonunpocomsrestrictivas,perojuntasestaspropiedadessonotro
mtododecrearventanas funcionales.
Dependiendo de los requerimientos, se puede escoger usar una o ms de estas reas de
contenidoparaproporcionarherramientasquepermitanalosusuariosmanipularyconsumirla
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
automticamentepormediodeExtJSconunapequeaconfiguracin.

6.3.8Manipulacin
Cuandonuestrasventanasestnenlapantalla,tenemosunrangodemtodosquepuedenser
usados para cambiar su posicin, apariencia y comportamiento. De hecho, ya hemos usado
unodeestosmtodosennuestros ejemplosshow queesusadoparadesplegarlaventana
en primer lugar. Aunque hemos usado show en la mayora de ejemplos, este mtodo puede
tenertresargumentos,todossonopcionales.
w.show('animTarget',function()
{
alert('Ahoramostrando')
},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 configuracinanimateTarget.
El segundo argumento es una callbackfunction, quese dispara cuando la presentacin de la
ventana se ha completado, y el tercer argumento es simplemente el mbito definido para la
funcinqueseejecutar.Resultqueelmtodoshownoeratansimpledespusdetodo.
Elobviocompaerodeshoweshide.Enefecto,estetomalosmismosargumentos,yharque
laventana desaparezca de la pantalla para su posterior uso. Si se est seguro de que no se
necesitarlaventananuevamenteentoncesesprobableusarelmtodoclose,queremuevea
laventanadelDOMyladestruye.
Lafuncionalidaddelosmtodoscloseyhide, semanejanparalosiconosdelaventana.Hay
unpocomsdemtodosquepermitentenercontrolsobrelostems,queyahemosvistocomo
sonminimizeymaximize.Estafuncionalidadbsicaseaumentaconelmtodorestore,quees
usado despus de maximizar y retorna la ventana con sus dimensiones originales, y
toggleMaximize,queessimplementeunaccesodirectoentremaximizeyrestore.Yentrminos
de configuracin, para que la ventana retorne a su configuracin inicial, usamos el mtodo
center,quecolocalaventanaenelmediodelaventanadelexplorador.
Tambin se puede manipular la posicin de nuestras ventanas, alignTo permite a un
desarrolladorpormediodecdigo,moverunaventanaprximaaotroelementoespecificado.
Estemtodotienetresparmetros:

Elelementoalquesevaaalinearlaventana.
Laposicindealineamiento
Unaposicindedesplazamiento,especificadaenunarraytipo[x,y]

Este mtodo es tilcuando 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
tamaoodedesplazamiento.
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
escenariosqueseradifcilelaboraramano.

6.3.9Eventos
Casitodaslasaccionesquehemoscubiertohastaahoratienensuspropioseventos,quesirven
paracorrernuestropropiocdigopersonalizado.Eleventominimize,esunodelosquehemos
mencionadoantes,porquesedebemanejarmanualmenteesteeventosisedeseaqueelicono
delaventanarealicealgo.Idealmente,seesperaquelaventanasealmaceneenunaespecie
dereaestilotaskbarparadespusrestaurarla.
varw=newExt.Window(
{
height:50,
width:100,
minimizable:true
})
w.on('minimize',doMin)
w.show()

Enelejemplodearriba,estamoscreandounanuevaventana,cuyapropiedadminimizable,se
coloca en true, y entonces aadimos un evento para que el minimizado funcione, para a
continuacinmostrar laventana en la pantalla. La funcin que manejar este evento es algo
as:
functiondoMin()
{
w.collapse(false)
w.alignTo(document.body,'blbl')
}

Nosotrossimplementeledecimosalaventanaquesecolapseenlapartedeabajomostrando
sololabarradelttulo(pasandounparmetrobuleanoconvalorfalsequesimplementeindica
quenodebeanimarlaventana)yentoncesusamoselmtodoalignTo,discutidopreviamente.
Conlosparmetrosquehemoselegido,laventanasealinearenlaparteinferiorizquierdadel
cuerpodeldocumento,talcomolohicieraunaventananicaenunabarradetareas.
Por supuesto, si se tuvieramsventanas, terminaramos con una superposicin en pila enla
parte inferior izquierda lo cul no es ideal en aplicacin del mundo real. Sin embargo, el
ejemplomuestracomosedebemanejareleventodeminimizado,ypuedeserusadocomouna
alternativaalmtodocolapsar.

CAP.7.Toolbars,Botonesy Mens
7.1Creacindebarras
7.1.1Toolbars
Una barra de herramientas o toolbar en ingls, se puede colocar en cualquiera de los
contenedoresantesrevisados,yaseaunpanel,unaventana,untabpanelounaforma.
Todosloscontenedorestienendosbarras,unaarribayotraabajo,sepuedencolocarlasdoso
una sola de las dos, la opcin de configuracin para cada una es de la siguiente forma, se
colocadentrodelaspropiedadesdecualquiercontadorlosiguiente:
tbar:Paralabarradearriba(topbar)
bbar:Paralabarradeabajo(bottombar)
Tambinsepuedecrearunatoolbarapartirdesuclaseconstructoradelasiguienteforma:
newExt.Toolbar(
{
renderTo:document.body,
items:[
{
xtype:'tbbutton',
text:'Button'
},
{
xtype:'tbbutton',
text:'MenuButton',
menu:[
{
text:'Better'
},
{
text:'Good'
},
{
text:'Best'
}]
},
{
xtype:'tbsplit',
text:'SplitButton',
menu:[
{
text:'ItemOne'
},
{
text:'ItemTwo'
},
{
text:'ItemThree'
}]
}]
})

7.1.2Botn
La creacin de un botn es bastante sencilla la principal opcin de configuracin es el texto
quesedesplegarsobreelbotn.Sepuedeaadirtambinuniconoparaserutilizadojuntoal
textosisedeseahacerlo.Acontinuacinlasintaxis:

{
xtype:'tbbutton',
text:'Button'
}

Estebotnsedebecolocarenunabarrasuperioroinferior,delasiguienteforma:
varw=newExt.Window(
{
title:'Miventana',
height:500,
width:500,
tbar:[
{
xtype:'tbbutton',
text:'Clickme'
}]
})

7.1.3Men
Un men, no es nada ms que un botn con un men desplegable, es muy simple tambin.
Los tems delmen trabajan conlos mismos principios de los botones. Pueden tener iconos,
clasesymanejadoresasignadosaellos.Lostemsdelmenpuedentambinagruparsejuntos
paraformarunconjuntodebotones,peroprimerosedebecrearunmenestandar:
Estaeslaconfiguracintpicaparaunmen:
{
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
menscobranvida.Paraagruparestostemsdemenjuntos,senecesitacolocarlaopcinde
configuracingroupconunvalorigualparacadagrupoquesedeseecolocar,ademssedebe
colocarbuleanopositivoparacadaitem:
{
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.4Botnsplit
El botn split es un botn estndar y no es un men combinado, con un pequeo giro. Pero
usandoestetipodebotn,sepuedeusarlafuncionalidaddeunbotn,mientrasqueseaade
laopcindeseleccionarunitemdelmenadjunto.Alhacerclicenlaparteizquierdadelbotn
que contiene el texto, se activa la accin del botn. Sin embargo, al hacer clic en el lado
derechodelbotn,quecontieneunapequeaflechahaciaabajo,seactivaelmen.
{
xtype:'tbsplit',
text:'SplitButton',
menu:[
{
text:'ItemOne'
},
{
text:'ItemTwo'
},
{
text:'ItemThree'
}]
}

7.1.5Alineacin,divisoresyespacios
Por defecto, los elementos de una barra de herramientas se alinean a la izquierda. No hay
configuracindealineamientoparaunabarra,porlotantosisedeseaalineartodoslosbotones
aladerecha,senecesitaaadirunespaciolleno,comoelprimerelementodeunabarra.Sise
quieretenertemsdivididosentreellosalaizquierdayaladerecha,tambinsepuedeutilizar
unespaciolleno:
{
xtype:'tbfill'
}

Sedebecolocaresteelementoenunabarradondesedeseeaadirunespacioyserequiera
quelostemsseanempujadoshaciaelfinaldelabarra.
Tambin se puede colocar separadores con unos pocos pixels de espaciovaco que pueden
serusadosparadarespacioentrebotones,omoverloselementosfueradelbordedelabarra:
{
xtype:'tbspacer'
}

Undivisortambinpuedesercoladodelamismaforma:
{
xtype:'tbseparator'
}

7.1.6Accesosdirectos
ExtJStienevariosaccesosdirectosquepuedenserusadosparahacercdigomsrpido.Los
accesos directos son uno o dos caracteres que pueden ser usados en lugar de un objeto de
configuracin.Porejemploconsiderandounllenadoestndardeunabarra:
{
xtype:'tbfill'
}

Elaccesosparaunllenadodeunabarraesunguinconunsmbolodemayorque:
>
Notodoslosaccesosdirectosestndocumentados.Aquestlalistadelosaccesosdirectos
deusocomn:
Acceso
directo

Componente
Llenado

'>'

Separador

''

Espaciador

''

Textodetem Cualquiertexto

Descripcin
Elllenadoofilleningls,esutilizadoparaempujarhaciala
derechalostemsdeunabarra
Esunabarraverticalqueesusadaparavisualizarlostemsde
formaseparada
Espacioenblancousadoparasepararvisualmentelostems.El
espacioesdedospxeles,perosepuedecambiarreemplazando
laclaseCSSytbspacer
AgregacualquiertextooHTMLdirectamenteenlabarrade
herramientasconsolocolocarestetextoentrecomillas

7.1.7Botonesdeiconos
Elbotnestndarpuedeactuarcomounbotndeiconooiconbuttoneningls,comolosque
se ven en los editores de texto para colocar negritas o itlicas. Se necesitan dos pasos para
transformarunbotnsimpleenunbotnconicono:

Sedebedefinirlaimagenqueserusadacomoicono
Yaplicarlaclaseapropiadaalbotn

{
xtype:'tbbutton',
cls:'xbtnicon',
icon:'imagenes/arrow.gif'
}

Tambinpodramoscolocaruniconoaladodeltextodeunbotndelasiguienteforma:
{
xtype:'tbbutton',
cls:'xbtntexticon',
icon:'imagenes/arrow.gif',
text:'Flecha'
}

7.1.8Manejadoresdebotones
Un botn necesita hacer ms que solo lucir bonito, necesita reaccionar a una accin del
usuario.Aquesdondeentranenaccinlosmanejadoresohandlerseningls.Unhandleres
unafuncinqueesejecutadacuandounbotnoitemdemenespresionadoconunclic.
Laconfiguracindelhandleresdondeseaadeunafuncin:
{
xtype:'tbbutton',
text:'Mensaje',
handler:function()
{
Ext.Msg.alert('Mensaje','Enviadodesdeelboton')
}
}

Estecdigodesplegarunmensajetipoalertaaldarclicalbotn.Algunasvecessenecesita
queserealicencambiosalbotncuandosepresiona,esasqueelmanejadordelbotnpasa
una referencia a s mismo para este propsito. El primer argumento de la funcin es una
referenciaalcomponentequedisparaelevento.
{
xtype:'tbbutton',
text:'Boton',
handler:function(f)
{
f.disable()
}
}

Sepuedetomarestareferenciaasmismoyaccederatodaslaspropiedadesyfuncionesdel
botn.Porejemplo,alllamaralafuncindisable(),elbotnsetransformaacolorgris.

7.1.9Cargarcontenidoconelclicdeunbotn
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
contenidodearchivosecargarenelcuerpodeunapgina:
{
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
}]
}

Ntesequetenemosunaopcindeconfiguracin.

Referenciabibliogrfica

SheaFrederick,ColinRamsay,SteveCutterBlades(2008)LearningExtJS.
FrankW.Zammetti(2009)PracticalExtJsprojectswithGears.
JesusD.GarciaJr(2009)ExtJsinAction.

ReferenciasdeInternet

Wikipedia

http://www.desarrolloweb.com
http://www.tierradenomadas.com/tw006.phtml