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.) Envalapeticin Configuraunparparmetroyvalorlabel=valueyloasigna alacabeceraparaserenviadoconlapeticin.

send(content) setRequestHeader(label,value)

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 ArchivosquepermitenusarotraslibrerasdentrodeExtJS Ladocumentacincompletadetodosloscomponentesde ExtJS(solocorreenunservidorweb) Paquetesadicionalesaloscomponentesoriginalesquelos hacenmsfuertes,incluyetambinalgunosnuevos objetos DependenciasdelaslibrerasdeExtJS,talescomo archivosCSSeimgenes ElcdigofuentecompletedeExtJS EselarchivoCSSprincipaldeExtJS,eselencargadode queloscomponentesseveantanbien EslaliberaprimariadeExtJS

Directorio adapter Directorio docs

Directorio examples Cientosdeasombrososytilesejemplos Directorio pkgs

Directorio resources Directorio src Archivo Archivo extall.css extall.js

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: Componente Llenado Separador Espaciador '>' '' '' Acceso directo Descripcin Elllenadoofilleningls,esutilizadoparaempujarhaciala derechalostemsdeunabarra Esunabarraverticalqueesusadaparavisualizarlostemsde formaseparada Espacioenblancousadoparasepararvisualmentelostems.El espacioesdedospxeles,perosepuedecambiarreemplazando laclaseCSSytbspacer AgregacualquiertextooHTMLdirectamenteenlabarrade herramientasconsolocolocarestetextoentrecomillas

Textodetem Cualquiertexto

7.1.7Botonesdeiconos
Elbotnestndarpuedeactuarcomounbotndeiconooiconbuttoneningls,comolosque se ven en los editores de texto para colocar negritas o itlicas. Se necesitan dos pasos para transformarunbotnsimpleenunbotnconicono:
{ xtype:'tbbutton', cls:'xbtnicon', icon:'imagenes/arrow.gif' }

Sedebedefinirlaimagenqueserusadacomoicono Yaplicarlaclaseapropiadaalbotn

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