CursodeExtJSCAP.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.Conceptosfundamentales1.1DOMEl 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]:

Paraaccederalvalordelinput:document.forms[0].caja.value

1.2DHTMLElHTMLDinmico(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.3CSSEsunmecanismosimpleparaaadirestilos(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.4JavaScriptJavaScript 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:

functionfEnviaAlerta() { vartexto=document.forms[0].caja.value alert(texto) }

1.5AJAXAjax, 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.6XMLXML,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: 125

1.7RIASon 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.8JSONJSON, 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.9jQueryjQuery 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: 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})

1.10PrototypePrototype 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.IntroduccinaExtJS2.1UnpocodehistoriaExtJSfue 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.3ExtJSesasncronoLa 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.EmpezandoausarExtJS3.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.3DocumentacinExtJSDentro 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: Aplicacion OhhhHolaatodosdesdeaqu' }) 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.2UnpanelconpotenciaHay 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.3LayoutExt 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.4LimpiandoventanasEn 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.5LosextrasConlasopcionesdeconfiguracinbajocontrol,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.6FuncionandodentrodeunescritorioElejemplomsgeneralizadodeunsistemadeventanaseselquenosmuestraunescritoriode 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.7OtrasopcionesLa 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.8ManipulacinCuandonuestrasventanasestnenlapantalla,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.9EventosCasitodaslasaccionesquehemoscubiertohastaahoratienensuspropioseventos,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 Mens7.1Creacindebarras7.1.1ToolbarsUna 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.2BotnLa 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.3MenUn 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.4BotnsplitEl 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,divisoresyespaciosPor 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.6AccesosdirectosExtJStienevariosaccesosdirectosquepuedenserusadosparahacercdigomsrpido.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.7BotonesdeiconosElbotnestndarpuedeactuarcomounbotndeiconooiconbuttoneningls,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.8ManejadoresdebotonesUn 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.9CargarcontenidoconelclicdeunbotnVamos 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