curso extjs

CursodeExtJS

CAP.1.Conceptosfundamentales ................................................................................. 31.1DOM................................................................................................................... 31.2DHTML.............................................................................................................. 41.3CSS..................................................................................................................... 41.4JavaScript............................................................................................................ 41.5AJAX.................................................................................................................. 51.5.1ElobjetoXMLHttpRequest .......................................................................... 6

1.6XML ................................................................................................................... 71.7RIA..................................................................................................................... 81.8JSON................................................................................................................... 91.9jQuery ................................................................................................................. 91.10Prototype......................................................................................................... 10

CAP.2.IntroduccinaExtJS....................................................................................... 112.1Unpocodehistoria........................................................................................... 112.2QuesexactamenteExtJS?.............................................................................. 112.3ExtJSesasncrono............................................................................................. 11

CAP.3.EmpezandoausarExtJS................................................................................. 123.1DescargandolalibreraExtJS............................................................................ 123.2Dndeycmoinstalarlo? ................................................................................ 123.3DocumentacinExtJS ....................................................................................... 123.4Construyendoelproyecto .................................................................................. 123.4.1LaprimeralibreraconExtJS ..................................................................... 13

3.5Spacerimage..................................................................................................... 143.6Probemoslosidiomas........................................................................................ 143.7Algounpocomscomplicado........................................................................... 153.8JSONyelobjetodeconfiguracin .................................................................... 163.8.1Lamaneraantigua ...................................................................................... 163.8.2Lanuevaformadeconfigurarobjetos......................................................... 163.8.3Queselobjetodeconfiguracin?............................................................ 173.8.4ComofuncionaJSON ................................................................................. 18

3.9Modificandoelejemploanterior........................................................................ 183.9.1Encendiendoelfuego................................................................................. 19

CAP.4.PanelsyTabPanels ......................................................................................... 214.1Panel ................................................................................................................. 214.1.1ElaboracindePanels................................................................................. 21

4.2TabPanel ........................................................................................................... 214.2.1ConstruyendonuestroprimerTabPanel ...................................................... 214.2.2ManejodeTabs,mtodosquedebesconocer.............................................. 22

CAP.5.Viewports,layoutsyregions........................................................................... 235.1.Viewports......................................................................................................... 235.2Layouts ............................................................................................................. 235.2.1FitLayout.................................................................................................... 235.2.2BorderLayout ............................................................................................. 235.2.3Accordion................................................................................................... 255.2.4CardLayout................................................................................................. 265.2.5TableLayout ............................................................................................... 275.2.6AnchorLayout............................................................................................. 28

CAP.6.Ventanasydilogos........................................................................................ 306.1Elayeryelhoyconventanas ............................................................................ 306.2Dilogos............................................................................................................ 306.2.1Alert ........................................................................................................... 306.2.2Prompt........................................................................................................ 316.2.3Confirmation .............................................................................................. 326.2.4Progress...................................................................................................... 326.2.5Show .......................................................................................................... 336.2.6ComportamientogeneraldeShow .............................................................. 34

6.3Ventanas ........................................................................................................... 356.3.1Empezando................................................................................................. 356.3.2Unpanelconpotencia................................................................................ 366.3.3Layout ........................................................................................................ 366.3.4Limpiandoventanas.................................................................................... 376.3.5Losextras ................................................................................................... 386.3.6Funcionandodentrodeunescritorio ........................................................... 386.3.7Otrasopciones ............................................................................................ 386.3.8Manipulacin.............................................................................................. 396.3.9Eventos....................................................................................................... 40

CAP.7.Toolbars,BotonesyMens............................................................................. 417.1Creacindebarras............................................................................................. 417.1.1Toolbars ..................................................................................................... 417.1.2Botn.......................................................................................................... 417.1.3Men .......................................................................................................... 427.1.4Botnsplit .................................................................................................. 437.1.5Alineacin,divisoresyespacios ................................................................. 437.1.6Accesosdirectos ......................................................................................... 437.1.7Botonesdeiconos....................................................................................... 447.1.8Manejadoresdebotones.............................................................................. 447.1.9Cargarcontenidoconelclicdeunbotn .................................................... 45

Referenciabibliogrfica .............................................................................................. 46ReferenciasdeInternet................................................................................................ 47

CAP.1.Conceptosfundamentales

1.1DOM

El DOMDocumentObjectModel, es una plataforma neutral que permite a los programas yscripts acceder y actualizar dinmicamente el contenido, la estructura y el estilo de losdocumentos. Esta estructura de objetos es generada por el navegador cuando se carga undocumento.

Desdeelpuntodevistadeldesarrollodepginasweb,elDOMnosindicaculeslanaturalezadelaestructuradelosdocumentosynosproveedeunaseriederecursosparapoderaccederatodossuselementos,alarelacinqueexisteentreellos,asuscaractersticas,susmodosderepresentacinyloseventosquesoportan.

ElDOMtienevarioselementos,cadaunoseencuentradentrodeuna jerarqua, tantoHTMLcomoXMLtienencomobaseunaestructuradentrodelacualsedefinenlosnodosquepuedenserdeinformacinenelcasodelXMLydeobjetosenelcasodeHTML.

EstructuraHTML:

Relacinentrenodos:

Ejemplo: En el caso de un input, se puede acceder a sus propiedades o caractersticasnavegandoporsujerarqua,apartirdedocument>forms[0]:

Paraaccederalvalordelinput:

document.forms[0].caja.value

1.2DHTML

ElHTMLDinmico(DHTML),noesmsqueunaformadeaportarinteractividadalaspginasweb,quetienelaventajadepodercrearefectosquerequierenpocoanchodebandaalahoradeejecutarseysonestosefectoslosqueaumentanlafuncionalidadalapgina,queconsoloHTMLsimpleseraimposiblederealizar.AunquemuchasdelascaractersticasdelDHTMLsepodranduplicarconotrasherramientascomoJavaoFlash,elDHTMLofrecelaventajadequenorequiereningntipodepluginparapoderutilizarlo.

Aunque las tecnologas en las que se basa el DHTML (HTML, CSS, JavaScript) estnestandarizadas,laformaenqueseimplementanenlosvariosnavegadores,difiereentres.

Por este motivo, la creacin de pginas web que usen esta tecnologa, puede llegar aconvertirse en una tarea muy compleja, puesto que hay que conseguir que la pgina sevisualiceperfectamenteentodoslosnavegadores.

1.3CSS

Esunmecanismosimpleparaaadirestilos(fonts,colors,spacing)alosdocumentosWeb.

La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de undocumentodesupresentacin.

Ejemplo:

position :absoluteleft :50pxtop :100pxwidth :200pxheight :100pxclip :rect(0px200px100px0px)visiblity :visiblezindex :1backgroundcolor :#FF0000layerbackgroundcolor :#FF0000backgroundimage :URL(icono.gif)layerbackgroundimage :URL(icono.gif)

1.4JavaScript

JavaScriptesun lenguajedeprogramacin interpretado(scripting),esdecir,quenorequierecompilacin, utilizado principalmente en pginas web, con una sintaxis semejante a la dellenguajeJava.

NoesunlenguajedeProgramacinOrientadaaObjetospropiamentedichocomoJava,perograciasaqueesbasadoenprototipos,sepuedeaplicarconceptosdeprogramacinorientadaaobjetos.

Ejemplo:

functionfEnviaAlerta(){

vartexto=document.forms[0].caja.valuealert(texto)

}

1.5AJAX

Ajax,acrnimodeAsynchronousJavaScriptAndXML (JavaScriptasncronoyXML),es unatcnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich InternetApplications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de losusuariosmientrassemantienelacomunicacinasncronaconelservidorensegundoplano.

Deesta formaesposiblerealizarcambiossobre laspginassinnecesidadderecargarlas, loquesignificaaumentarlainteractividad,velocidadyusabilidadenlasaplicaciones.

Ajaxesuna tecnologaasncrona,enelsentidodeque losdatosadicionalesserequierenalservidorysecarganensegundoplanosin interferircon lavisualizacinnielcomportamientodelapgina.JavaScriptesellenguajeinterpretado(scriptinglanguage)enelquenormalmentese efectan las funcionesde llamadadeAjaxmientras queelacceso a los datos se realizamedianteXMLHttpRequest,objetodisponibleenlosnavegadoresactuales.Encualquiercaso,noesnecesarioqueelcontenidoasncronoestformateadoenXML.

Ajax es una tcnica vlida para mltiples plataformas y utilizable en muchos sistemasoperativos y navegadores dado que est basado en estndares abiertos como JavaScript yDocumentObjectModel(DOM).

Laconversacintradicionalentreelclienteyelservidoresenserie,secargaunasolapginaalavez,comoseexplicaenlasiguienteimagen:

La interaccinAJAXentreel clienteyel servidores asncrona,esdecirdentrode lamismapginaserealizalasolicitudyentregaderespuesta,graciasalobjetoXMLHttpRequest,comosemuestraenlasiguienteimagen:

ElprocesodeunaaplicacinAJAXserveradelasiguienteforma,comomuestralaimagen:

1.5.1ElobjetoXMLHttpRequest

Su objetivo es hacer peticiones asncronas al servidor, es la columnavertebral de todas lasaplicaciones AJAX. Est admitido por todos los navegadores.Microsoft lo introdujo en IE 5comounobjetoActiveX.

Propiedades:

Propiedades Descripcinonreadystatechange DeterminaquefuncinserllamadacuandolapropiedadreadyStatedel

objetocambie.Nmeroenteroqueindicaelstatusdelapeticin:0=Noiniciada1=Cargando2=Cargado3=Interactivo

readyState

4=CompletadoresponseText DatosdevueltosporelservidorenformadestringdetextoresponseXML Datosdevueltosporelservidorexpresadoscomounobjetodocumento.

CdigoestatusHTTPdevueltoporoelservidor:200=OK(Peticincorrecta)204=NoContent(Documentosindatos)301=MovedPermanently(RecursoMovido)401=NotAuthorized(Necesitaautenticacin)403=Forbidden(Rechazadaporservidor)404=NotFound(Noexisteenservidor)408=RequestTimeout(Tiemposobrepasado)

status

500=ServerError(Errorenelservidor)

Mtodos:

Propiedades Descripcinabort() Detienelapeticinactual.getAllResponseHeaders() Devuelvetodaslascabecerascomounstring.getResponseHeader(x) Devuelveelvalordelacabeceraxcomounstring.open(method,URL,a) EspecificaelmtodoHTTP(porejemplo,GEToPOST),la

URLobjetivo,ysilapeticindebesermanejadaasncronamente(Si,a=TruedefectoNo,a=false.)

send(content) EnvalapeticinsetRequestHeader(label,value) Configuraunparparmetroyvalorlabel=valueyloasigna

alacabeceraparaserenviadoconlapeticin.

1.6XML

XML,siglaseninglsdeeXtensibleMarkupLanguage(lenguajedemarcasextensible),esunmetalenguajeextensibledeetiquetasdesarrolladoporelWorldWideWebConsortium(W3C).Es una simplificacin y adaptacin del SGML y permite definir la gramtica de lenguajesespecficos(delamismamaneraqueHTMLesasuvezunlenguajedefinidoporSGML).PorlotantoXMLnoesrealmenteunlenguajeenparticular,sinounamaneradedefinirlenguajesparadiferentesnecesidades.AlgunosdeestoslenguajesqueusanXMLparasudefinicinsonXHTML,SVG,MathML.

XMLnohanacidosloparasuaplicacinenInternet,sinoqueseproponecomounestndarparaelintercambiodeinformacinestructuradaentrediferentesplataformas.Sepuedeusarenbasesdedatos,editoresdetexto,hojasdeclculoycasicualquiercosaimaginable.

XMLesunatecnologasencillaquetieneasualrededorotrasquelacomplementanylahacenmuchomsgrandeyconunasposibilidadesmuchomayores.Tieneunpapelmuyimportanteenlaactualidadyaquepermitelacompatibilidadentresistemasparacompartirlainformacindeunamanerasegura,fiableyfcil.

Ejemplo:

125

1.7RIA

Son aplicaciones web que tienen la mayora de las caractersticas de las aplicaciones deescritorio tradicionales, estas aplicaciones utilizan un navegador web estandarizado paraejecutarse y por medio de un plugin o independientemente con una virtual machine, seagreganlascaractersticasadicionales.Esta surge como una combinacin de las ventajas que ofrecen las aplicacionesWeb y lasaplicacionestradicionales.Buscanmejorarlaexperienciadelusuario.NormalmenteenlasaplicacionesWeb,hayunarecargacontinuadepginascadavezqueelusuariopulsasobreunenlace.Deestaformaseproduceuntrficomuyaltoentreelclienteyelservidor,llegandomuchasveces,arecargarlamismapginaconunmnimocambio.EnlosentornosRIA,encambio,noseproducenrecargasdepgina,yaquedesdeelprincipiose carga toda la aplicacin, y slo se produce comunicacin con el servidor cuando senecesitandatosexternoscomodatosdeunaBasedeDatosodeotrosficherosexternos.

Ejemplo:UnejemplomuybuenodeRIAeseldesktopcreadoporelExtJSteamqueutilizaunmenmuyparecidoaldelsistemaoperativoWindows,tieneconosenelescritorioydespliegaventanasquesepuedenmover,cerrarycambiardetamao.

1.8JSON

JSON, acrnimo de JavaScriptObjectNotation, esun formato ligero para el intercambio dedatos.JSONesunsubconjuntodelanotacinliteraldeobjetosdeJavaScriptquenorequiereelusodeXML.La simplicidad de JSON ha dado lugar a la generalizacin de su uso, especialmente comoalternativaaXMLenAJAX.UnadelassupuestasventajasdeJSONsobreXMLcomoformatodeintercambiodedatosenestecontextoesqueesmuchomssencilloescribirunanalizadorsemntico de JSON. En JavaScript, un texto JSON se puede analizar fcilmente usando elprocedimientoeval(),locualhasidofundamentalparaqueJSONhayasidoaceptadoporpartede la comunidad de desarrolladores AJAX, debido a la ubicuidad de JavaScript en casicualquiernavegadorweb.

Ejemplo:

({

"total":"2","results":[{

"id_genero":"F","descripcion_genero":"Femenino"

},{

"id_genero":"M","descripcion_genero":"Masculino"

}]})

1.9jQuery

jQueryesunabibliotecaoframeworkdeJavaScript,creada inicialmenteporJohnResig,quepermite simplificar la manera de interactuar con los documentos HTML, manipular el rbolDOM,manejareventos,desarrollaranimacionesyagregarinteraccinconlatecnologaAJAXapginasweb.Fuepresentadael14deenerode2006enelBarCampNYC.

jQueryessoftwarelibreydecdigoabierto,poseeundoblelicenciamientobajolaLicenciaMITylaLicenciaPblicaGeneraldeGNUv2,1permitiendosuusoenproyectoslibresyprivativos.2jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas enJavaScriptquedeotramanerarequerirandemuchomscdigo,esdecir,conlasfuncionespropiasdeestabibliotecaselograngrandesresultadosenmenostiempoyespacio.

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.10Prototype

Prototype es un framework escrito en JavaScript que se orienta al desarrollo sencillo ydinmico de aplicaciones web. Es una herramienta que implementa las tcnicas AJAX y supotencialesaprovechadoalmximocuandosedesarrollaconRubyOnRails.

ConlaWeb2.0lastcnicasdedesarrollodepginaswebnecesitabandarungransalto.Conesto en mente naci la tcnica AJAX, que gracias a Prototype permite el desarrollo gil ysencillodepginasWeb,estoenrelacinaldesarrollador,yproveealclienteunamaneramsrpidadeaccederalservicioquesolicita.PrototypeesunFrameworkbasadoenJavasScriptorientadoaproporcionaraldesarrolladordetcnicasAJAXlistasparaserusadas.ElpotencialdePrototypeesaprovechadoalmximosi se desarrollaconRubyOnRails,esto noquieredecir que no se puede usar desde otro lenguaje, solamente que demandara un "mayoresfuerzo"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

ExtJSfueoriginalmenteconstruidacomounaextensinde labibliotecaYUI,en laactualidadpuede usarse como extensin para las bibliotecas jQuery yPrototype.Desde la versin 1.1puedeejecutarsecomounaaplicacinindependiente.

2.2QuesexactamenteExtJS?

ExtJSesunabibliotecaoconjuntodelibrerasdeJavaScriptparaeldesarrollodeaplicacioneswebinteractivas,usatecnologasAJAX,DHTMLyDOM.

ExtJSpermite realizar completas interfaces de usuario, fciles de usar,muy parecidas a lasconocidasaplicacionesdeescritorio.Estopermitealosdesarrolladoreswebconcentrarseenlafuncionalidaddelasaplicacionesenvezdeenlasadvertenciastcnicas.

2.3ExtJSesasncrono

La programacin tradicional para Internet, o tambin llamadaWeb 1.0 ejecuta el cdigo ensucesin,esdeciresperaaqueunalneadecdigosecompleteantesdeejecutarlasiguiente.Al igual quela construccin de unacasa,los cimientosdeben sercompletadosantes de quelasparedesse puedanconstruir,acontinuacin,lasparedesdebenestarcompletasantesdequeeltechoseaconstruido.

ConExtJS,queesunaherramientatipoWeb2.0,podemosfcilmenteempezarporeltechodelacasaantesqueloscimientosestnconstruidos.Esalgoascomoimaginarsequeeltechode la casa est siendo construido en una fbrica, mientras al mismo tiempo, se estnconstruyendoloscimientosylasparedesycuandotodoestlisto,simplementesearmatodomsrpido.

Estonospresentaotrascosasqueantesnosolamostener,ahorayanoestamosobligadosatomarelenfoquelneaporlneadeldesarrolloweb.ExtJSnosayudaasalirpormediodeeventosymanejadoresquepodemospegaranuestrafuncionalidad.

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,yaqueesunSDKquecontieneunconjuntodearchivosquecomprendenlosrecursosqueExtJSnecesitaparacorreradecuadamente.Vienedentrodeunarchivo comprimido, el mismo que vamos a descomprimir dentro de la carpeta principal denuestro servidor de pginas dinmicas favorito, en este caso lo haremos dentro deApache>htdocs>aplicacin,unavezcopiadoeldirectorioquecontiene las librerasdeExtJS,cambiemoselnombredelacarpetaaextjssimplemente.

ElSDKsecomponedelassiguientescarpetasyarchivosimportantes:

Tipo Nombre Descripcin

Directorio adapter ArchivosquepermitenusarotraslibrerasdentrodeExtJS

Directorio docs LadocumentacincompletadetodosloscomponentesdeExtJS(solocorreenunservidorweb)Directorio examples Cientosdeasombrososytilesejemplos

Directorio pkgsPaquetesadicionalesaloscomponentesoriginalesqueloshacenmsfuertes,incluyetambinalgunosnuevosobjetos

Directorio resources DependenciasdelaslibrerasdeExtJS,talescomoarchivosCSSeimgenesDirectorio src ElcdigofuentecompletedeExtJS

Archivo extall.css EselarchivoCSSprincipaldeExtJS,eselencargadodequeloscomponentesseveantanbienArchivo extall.js EslaliberaprimariadeExtJS

3.3DocumentacinExtJS

Dentro del paquete de librerasExtJS, viene incluida la documentacin, a la cual podremosaccederdesdecualquierexploradorwebcolocandolasiguientedireccinlocal:

http://localhost/aplicacion/extjs/docs/

Aslatendremosamanoporcualquierdudaquesepresente.

Ejercicio:Explorardocumentacin

3.4Construyendoelproyecto
http://www.sencha.com/http://localhost/aplicacion/extjs/docs/

Dentrodelacarpetacreadaenhtdocs,aplicacion,vamosacrearlassiguientescarpetasparaorganizarmejornuestroproyecto:

imagenes librerias estilos

Finalmentevamosacrearunarchivoen la razdenuestracarpeta aplicacion,denominadoindex.html,dentrodelcualvamosa llamaralas librerasquesonnecesariasparaque incluirExtJSenelproyecto:

Aplicacion

Analizandoelejemploactualtenemoslosiguiente:

Ext.onReady:EstafuncinhacequenuestrocdigoespereantesdequeelDOMestdisponible.EstosenecesitaporqueelJavaScriptempiezaejecutandotanprontocomoesencontradoeneldocumento,momentoenelcualnuestroselementosDOMpodrannoexistir.

Ext.Msg:Esta eslafuncinprincipalusadaparalacreacindeunaalerta,yaqueseocupadetodolonecesarioparateneruncuadrodedilogocompleto.

3.5Spacerimage

Antesdecontinuar,debemosproveeraExtJSconalgoquenecesita,unaimagen,quesehadenominadospacer image,debidoaqueExtJSnecesita tener lamedidadeunpxelporunpixel transparente,paradarunanchofijoasuscomponentes.Sedebe indicarlalocacindeestaimagenusandolasiguientelnea:

Ext.BLANK_IMAGE_URL='images/s.gif'

SiempresecolocacomoprimeralneadentrodeleventoonReady.

La idea de utilizar una spacer image, es porque la interface de usuario deExtJS es creadausandoCSS,peroelCSSnecesitaelementosHTMLfundamentalesparacrearelestiloquelesda la apariencia actual a los componentes deExtJS.El nico elementoHTMLque tiene untamaoexactoyprevisibleentodoslosnavegadoresenunaimagen.Asqueestaimagenesusadaparadefinirlaformacomoloscomponentessondibujados.EsascomoExtJSmantienelacompatibilidadconlamayoradenavegadoresweb.

Ejercicio:Aadirspacerimagealejemploanterior.

3.6Probemoslosidiomas

ExJSesmultiidioma,elidiomapordefaultesingls,paracambiarlosolonecesitamosaadirlalibreracorrespondientealidiomadeseado,esasqueparaespaolusaremos:

Estadeclaracindebecolocarseantesdelaslibreraspropias.

Ejercicio:Colocarlalibreraenelindex.htmlycorrerelejemploconlalibreraysinlalibreraparaverquesucede.

3.7Algounpocomscomplicado

Vamosacrearunejemplomscomplicado,utilizandootroselementosdeExt.Msg,paraloculcreamos un archivo denominado pregunta.js en el directorio de nuestras librerias, con elsiguientecdigo:

Ext.onReady(function(){

Ext.BLANK_IMAGE_URL='images/s.gif'Ext.Msg.show({

title:'Javier',msg:'Hasvistomicomputadora?',buttons:{

yes:true,no:true,cancel:true

}})

})

Conestecdigocreamosuncuadrodedilogoconunttulodefinidoycuyomensajeprincipalesunapregunta,ademslecolocamostresbotonescomoopcionesderespuesta.

El argumento pasado a onReady es una funcin, que puede ser pasada con un nombredefinido,ocreadaenlneacomoenestecaso.Estemtododecrearunafuncinenlneasedenominacomounafuncinannima,queesusadaparallamarunafuncinparticularsolounavez.

Siestuviramosusandouna funcinquepuedaser reultizada,entoncesdeberamosdefinirladeestaforma:

functionfDondeEsta(){

Ext.Msg.show({

title:'Javier',msg:'Hasvistomicomputadora?',buttons:{


}})

}

Ext.onReady(function(){

Ext.BLANK_IMAGE_URL='images/s.gif'fDondeEsta()

})

Si estamos pensando realizar una aplicacin grande, es buena idea hacer funcionesreutilizables.

Tambinsepuedenhacercambiosenlaconfiguracindeloscomponentes,colocandoestilospropios.Yesposible incluirunafuncinparaqueseejecutealhacerclicen losbotonesdelcuadrodedilogo,delasiguienteforma:

1. Sedebecrearunarchivodeestilos,denominadoestilos.cssen lacarpetaestilosdelproyecto.

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, estafuncin hara que aparezca una alerta indicando cual fue el botn que presion elusuario:

fn:function(btn){

Ext.Msg.alert('Javierhizoclicen',btn)}

3.8JSONyelobjetodeconfiguracin

Ennuestrosejemplos,hemosusadoalgoquesedenominaobjetodeconfiguracin,queeslaformaprincipal dehacerqueExtJShaga loquenosotrosqueremos.Estopermite realizar laconfiguracindelasdiferentesopcionesqueestndisponiblesparacualquierfuncinqueestsiendousada.

3.8.1Lamaneraantigua

Antes solamos llamar a las funciones con un set de argumentos predeterminados.Es decirquedebamosrecordarelordendelosargumentoscadavezquelafuncinseausada.

varprueba=newFuncionPrueba('tres','argumentos','usados')

Estamaneraantiguadecrearlas funcionespuededarmuchosproblemas:

Requierequerecordemoselordendelosargumentos Nodescribeloquecadaargumentorepresenta Ofrecemenosflexibilidadparaaumentarargumentosadicionales

3.8.2Lanuevaformadeconfigurarobjetos

Usandoelobjetodeconfiguracin,tenemosunaltoniveldeflexibilidad,ysepuededecirquenuestrasvariablesestnenunplanodescriptivo.Elordendelosargumentosnoimportams,ya que el primero puede ser el ltimo o estar en medio. Con el mtodo del objeto deconfiguracindepasarargumentosasusfunciones,losargumentosnonecesariospuedeserobviadosdeladeclaracin.

varprueba=newFuncionPrueba({

primeraPalabra:'tres',segundaPalabra:'argumentos',terceraPalabra:'usados'

})

Este mtodo tambin permite una expansin ilimitada de los argumentos de nuestrasfunciones.Usandopocosoaadiendomsargumentos.Otragranventajadeusarelobjetodeconfiguracin es que el uso previo de las funciones no se ver afectado por el aumento odisminucindelosargumentosenunusoposterior.


segundaPalabra:'argumentos'})


segundaPalabra:'argumentos',cuartaPalabra:'wow'

})

3.8.3Queselobjetodeconfiguracin?

SiseestfamiliarizadoconCSSoJSON,sepuedenotarqueelobjetodeconfiguracinlucesimilaracualquierdeestosdos,sobretodoporqueeslomismo.Elobjetodeconfiguracinessolounaformadeestructurardatosquepuedeserfcilmenteinterpretadaporloslenguajesdeprogramacin,enestecasoJavaScript.

Porejemplo,veamoslaporcindelaconfiguracindelnuestroejemplo:

{title:'Javier',msg:'Hasvistomicomputadora?',buttons:{


},icon:'personaicon',fn:function(btn){

Ext.Msg.alert('Javierhizoclicen',btn)}

}

Laconfiguracinparticularqueestamosusandoaqupodraparecercompletaaprimervista,perounavezquelaconocemos,seconvierteenunaformaextremadamentefcildeconfigurarcomponentes.CasitodosloscomponenesdeExtJSutilizanelobjetodeconfiguracin,asquees algo que se nos tiene que volver familiar. El objeto de configuracin se volver nuestromejoramigo.

Aqu sedetallanalgunospuntos importantesquehayque recordarcuando se trabajaconelobjetodeconfiguracin:

Se deben colocar llaves para identificar el conjunto de registros, que simboliza losregistrosdentrodeloscorchetescomopartedeunobjeto>{registros}.

Cada registro se compone de un par nombre/valor, separados por dos puntos, yseparadosporcomasentreellos>{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 puedetambincontenerobjetosconregistros,valoresocualquiernmerodeotrascosas.

Lamayor ventaja de usar JSON para configurar nuestros componentes, es que si nosotrosnecesitamosmsopciones,podemosempezardigitndolasylisto.Contrarioalatpicallamadaaunafuncin,elordendenuestrasopcionesdeconfiguracinllegaaserirrelevante,ypuedehaberpocosotantosargumentoscomoseannecesarios.

3.8.4ComofuncionaJSON

Todosebasaen la funcineval,que es laqueJavaScriptusapara interpretarunacadenaJSON,yconvertirlaenobjetos,arraysyfuncionesquepuedenserusadas.

3.9Modificandoelejemploanterior

Vamos a abrir nuestro ejemplo pregunta.js yvamos a grabar como pregunta2.js y vamos aaadirlefuncionalidadacadabotndediferentemanera:

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,sedespliegaundilogotipopromptquepermiteingresarunsolovaloryesunelementoestndarencasitodaslasinterfacesdeusuario.

CuandosedeclicenNosedespliegaunaalerta,parecidaalaalertaestndardelJavaScriptperoconesteroides.

AlhacerclicenelbotnCancelar (opresionar la teclaEscape)sedespliegaunmensajedeesperausandounabarradeprogreso.

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

3.9.1Encendiendoelfuego

Ahora,vamosaempezarcausandoalgunasreaccionesennuestrapgina,basndonosenlasrespuestasde losusuariosa losdilogos.Dentrodenuestrasentenciaswitch,paraelbotnSicolocaremosuntercerargumentoen lafuncinpromptqueseejecutarcuandoelbotnAceptarseapresionado.Vamosavalidareltextointroducidoeneldilogodelprompt,siesigualaenlaoficinasepresentareltextoNoestah,casocontrarioseimprimireltextointroducido.

NecesitamoscolocarunDIVenelcuerpodelapgina

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

Paraelcasodel No,sedesplegarunaalerta,que tambincambiaelestilodeldocumentocuandoelbotnespresionado.

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() >Estemtodo permite el acceso a cualquier elemento del documentoHTMLcolocandocomoparmetrosuIDypermitemanipularlo,comohemosvistoenelejemplo.

o Ext.DomHelper > Esta clase proporciona una capa de abstraccin de DOM yapoya de manera transparente a travs de la creacin de elementos DOM outilizandofragmentosdeHTML.TambintienelahabilidaddecrearplantillasdefragmentosHTML,apartirdelaconstruccindesuDOM.

o Ext.getBody()>RetornaelbodyactualcomounelementodeExtJS.

CAP.4.PanelsyTabPanels

4.1Panel

ElPanelesuncontenedorquetieneunafuncionalidadespecficaycomponentesestructuralesque lohacenelperfectobloquedeconstruccinparaaplicacionesorientadasa interfacesdeusuario.

4.1.1ElaboracindePanels

TodosloscomponentesdeExtJStienensudeclaracin,susmtodosypropiedades,paracuyadefinicinseutilizaelobjetodeconfiguracinantesrevisado,enelcasodelPanelseconfiguradelasiguientemanera:

1. Creamosenlacarpetalibreriasdenuestroproyectounarchivoquesellamepanel.js2. CreamoselPaneldirectamenteasignandoelobjetoaunavariableusandolallamada

almtodocreadorExt.Panel().3. Alobjetocreadolecolocamoslassiguientespropiedades:

a. Ttulob. Anchoc. Altod. Ylomsimportante,dondevaaubicarse,paraellodebemosusarlapropiedad

applyTo,yaqueestepanelpodr serel contenedordeotrosobjetos,msnoestcontenidodentrodeotrocomponente,siasfueranonecesitaramosestapropiedad.

4. En el index.html llamamos en las libreras propias, solamente al archivo panel.js ycorremosnuestraaplicacin.

Ejercicio:Aadirmspropiedades.

4.2TabPanel

Un TabPanel puede ser usado exactamente como un Panel estndar para propsitos dediseo, con laventajaadicionaldequeposeeno solounpanel, sinovariosmanejadosporpestaasseparadas,estaspestaaspuedencolocarsetantoarribacomoabajodelpanel.

4.2.1ConstruyendonuestroprimerTabPanel

ParaconstruirnuestroprimerTabPanel,vamosacrearlodentrodelPanelquecreamosconanterioridad y de otra forma de las que hemos observado hasta ahora, para crear uncomponentedeExtJSdentrodeotro,lopodemoshacerdedosformas:

1. Asignandoelobjetoocomponenteaunavariableycolocandoestavariablecomoitemocomponentedeotro,comoyahemosvisto.

2. Realizando una creacin interna sin asignar a unavariable y para hacer referencia aesteobjetoencualquierotrolugarusaremossuID.

Para ello vamos a usar el ejemplo que ya tenamos de la creacin del Panel y seguir lossiguientespasos:

1. Lovamosarenombrarcomotab_panel.js.

2. ColocamoselTabPanelcomoitemdelpanel.3. Cambiamoslalibrerallamadaenelindex.htmlycorremoslaaplicacin.

Lapropiedaddeconfiguracinitems,esunarraydeobjetosquedefinecadaunodelostabscontenidos en este TabPanel. El ttulo es la nica opcin que obligadamente necesita sercolocadaparavisualizarcorrectamentecadatab.

Tambin necesitamos colocar un tab activo con la propiedad activeTab, que es cero paranuestroTabPanel.Esteeselndicedelostabsenelpanel,deizquierdaaderechaempezandoacontardesdecero.Esto le indicaalTabPanelqueel tabde laposicincerodebehacerseactivopordefecto,delocontrario,resultaraenunpanelenblancohastaqueelusuariohagaclicenunapestaa.

Ejercicio:ColocarlassiguientespropiedadesdeconfiguracinalTabPanelyverquesucede:

closable disabled tabPosition

4.2.2ManejodeTabs,mtodosquedebesconocer

Tenemosalgunos mtodosespecialesparaelmanejodetabs,queson:

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

setActiveTab(String/Number item):Colocaun tabespecficocomoactivo,paraellohayqueenviarcomoparmetroelndicedelelementodeseado.

getActiveTab():Retornaeltabactivoactual. show():Muestra fsicamenteenelcontenedor,unelementorecinaadidooquese

encuentreoculto. hide():Ocultasolamentelapestaadeltab,noelcuerpo,paraellohayqueutilizarel

mtodohideTabStripItem.Esmuytilparacuandosecolocalacaractersticaclosable:true,debidoaquecuandosecierraunapestaaelobjetoseautodestruye,sisevuelveanecesitareltabhayquevolveracrearloyestoesunpocomspesado,porloquesedebeprogramareleventobeforemoveyhacerquesoloseoculte,noseautodestruya.

hideTabStripItem(Number/String/Panelitem):Ocultaelcuerpodelapestaa.

Estosmtodoslosveremosejecutadosjuntoconlayoutsyregions.

CAP.5.Viewports,layoutsyregions

5.1.Viewports

ElViewportesuncontenedor(seheredadelaclaseContainer)queens,tieneunaestructuraigualquecualquierotrocontenedor,perotieneunlugarespecialdentrodeExtJS.ElViewportrepresentaeltotaldelasuperficievisibleparaelusuario,loquesignificaqueeslaventanadelnavegador en otras palabras (o para serms precisos, la porcin donde se ejecuta un sitioweb,tpicamentellamadoventanadelnavegador).

Cuando se crea un Viewport automticamente se coloca dentro del del documentocargadoenelexploradoryseacomodaparaocupartodalaventanadelnavegador.Tambinestal tantode loseventosdecambiode tamaode laventanadelexploradorquepuedanocurriryreaccionaapropiadamente.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 transformacualquiercontenedorenunaverdaderaaplicacinweb.LosestilosmsampliamenteusadospuedenserencontradosensistemasoperativoscomoMicrosoftWindows,queutilizaborderslayouts,regionesdetamaovariable,acordeones,tabsycasitodoloquesepuedaimaginar.

Paramanteneraparienciaconsistenteentodoslosnavegadores,yparaproveercaractersticascomunes de interfaces de usuario, Ext JS tiene un poderoso sistema demanejo de layouts.Cadaseccinpuedesermanejadaypuedesermovidaoescondida,ypuedenaparecerenunclic,cuandoydondesenecesite.

5.2.1FitLayout

UnFitLayoutcontieneunsoloelementoqueautomticamenteseexpandepara llenar todoelcontenedor. Por lo general no se crea la instancia de esta clase, en la mayora decontenedoressecolocaeltipodelayoutenlapropiedadcorrespondiente.

Curiosamente, FitLayout no tiene sus propias propiedades de configuracin, adems de lasquehereda.CuandosenecesitetenerunPanelquelleneelcontenedorentero,FitLayoutdebeserusado.Todoloquesenecesitaescolocarelatributolayoutenelcontenedorpararellenar.

5.2.2BorderLayout

UnBorderLayoutesrelativamenteun layoutmuysimpleque tambinesdeusomuycomn,talvezelmspopular.Eseesunlayoutquetienecincoregiones:

unaalolargodetodalapartesuperiordelapgina, otraenelladoizquierdo, otraenelladoderecho, otraenlapartedeabajo yotraentretodaslasdemsenelmedio.

The BorderLayout soporta barras de separacin entre las regiones, permitiendo al usuariocambiarlas de tamao. Tambin soporta secciones que se pueden tanto expandir comocolapsar.TalcomoFitLayout,elBorderLayoutensimismono tienesuspropiasopcionesdeconfiguracin.

SibienhaycincoregionesdisponiblesenelBorderLayout,noesnecesarioqueseusentodas.Sinembargo,nosepuedeadicionar regionesdespusdequesehahechoelBorderLayout,poresohayque asegurarsedecuantas regiones se necesitanparaconfigurarlascuando secreaelBorderLayout.

No se puede crear una instancia de Ext.layout.BorderLayout. En su lugar se debe configurar elatributo layout de algun contenedor. Por ejemplo, creamos un Viewport, para desplegar los usos deBorderLayoutparaorganizarestecontenedor:

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.Estasregionespuedencontenerotroscomponentes,sinproblemas.Comoalternativacadareginensimismapuedeserdivididaenmsregionesanidadas,porejemplo laseccindelcentropuedeserdivididahorizontalmenteparatenersupropiareginsur.

Ejercicio:Hacerquelasregionespuedacambiarsedetamaoosepuedancontraer.

5.2.3Accordion

ElAccordionesenciertomodosupropiocomponente.Enotraslibrerasrealmenteloes,peroenExtJSesuntipodelayout(esliteralmenteunaextensindeFitLayout).Enpocaspalabras,un Accordion es una sola capa en la que se tienen diferentes paneles que pueden serseleccionadosporelusuario.Estospanelesestnapiladosverticalmente(aunquehayalgunasimplementaciones que permiten hacerlo horizontalmente tambin) y usualmente incluye unbonitoefectoanimadocuandoseseleccionaunodeellos.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.Seespecificaelaltoyseestablece la propiedad collapsible: true, para que se puedan colapsar y se configura lapropiedad animate: true, comn para todos los paneles, que permite establecer un bonitoefectoelmomentodeseleccionaralgnpanel.

5.2.4CardLayout

ElCardLayoutesuntipodeFitLayoutconesteroides,yaquepermitetenermltiplespanelesadaptadosaloscontenedores,perosolamentepermitemostrarunoalavez.Interfacescomolos wizards son tpicamente implementadas con CardLayout, as como las interfaces conpestaas.

El mtodo ms importante expuesto por el CardLayout es setActiveItem (). Este permitemostrarunnuevopanelenelCardLayoutyaseaporsucdigoporelvalordelndice.Esteestcompletamentebajoelcontroldelprogramador,elCardLayoutnopuedeintercambiarseentre

paneles por si solo (o en respuesta a algn evento de usuario, amenos que se escriba elcdigoparahacerlo),asquenohayalgopordefectoparaque se intercambien lospanelescomoeselcasodelAccordion.

El CardLayout tambin soporta la opcin de configuracin deferredRender, que, cuando esseteada a true, le dice al contenedor que solamente coloque el panel que actualmente semuestra.Estaesunabuenaopcindeconfiguracinparaquelacargaseaeficiente.Ejemplo:


title:'MiPrimerCardLayout',layout:'card',height:400,id:'myCardLayout',activeItem:0,items:[{

title:'Panel1',html:"Hola,soyelPanel#1

"+""

},{title:'Panel2',html:"Hola,soyelPanel#2

"+""

}]})

En este ejemplo tenemos configurado un Panel tipo CardLayout que tiene dos panelesinternos,elpanelactivoeselpanelcero,yenlaconfiguracinhtmldecadauno,secreaunbotn tipo HTML simple, el cual al presionarlo cambia al otro panel configuradorespectivamente.

Ntese que para configurar la propiedad html se usa HTML simple y se maneja el eventoonClickdelbotndentrodelcualsecolocacdigopropiodeExtJS.

5.2.5TableLayout

Un TableLayout permite crear capas basadas en tablas con facilidad. En algunos casos esconceptualmentesimilaralBorderLayoutexceptoquese tieneelcontroldecuantasregionespodamosquerer.

UnagrandiferenciaentrecrearunlayoutusandoTableLayoutyusandotablasconHTMLplanoesqueconTableLayoutesqueyanonospreocupamosdelastablasyfilasdeformaexplcita.Nohayquepreocuparsedelasceldasconfilasninadaporelestilo.TodoloquehayquehaceresespecificarelnmerodecolumnasqueelTableLayoutdebeteneryentoncesaadirobjetosencadauno,dederechaaizquierda,dearribahaciaabajo.ElTableLayoutsedarcuentadelaposicindecadapanelbasndoseenlacuentadefilas,ademssepodrcolocarcualquiertamaode fila ycolumnaque senecesite.Si seestacostumbradoa lacreacinde tablasHTML,utilizandoTableLayoutpuedeserunpocodifcildeentenderparaelcerebro,perounavezquelohace,rpidamente,unosedacuentadelaflexibilidadqueofrece.Ejemplo:


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

UnAnchorLayoutesunlayoutquepermitequeloselementoscolocadosenuncontenedorseacoplenunosconotros.Enotraspalabras,sielcontenedorcambiadetamao,yaseaporqueel contenedor mismo cambia de tamao o indirectamente del resultado del cambio de sucontenedorprincipal,entoncestodosloselementosdentrodelseacoplanalnuevotamaoylomsimportanteseredimensionan,deacuerdoalasreglasqueseconfiguren.

Enestafigurasepuedeverquealcambiardetamaoalaventana,loscomponentesadentrotambincambiandetamao.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.Enlaventanaseespecificaelatributolayoutcomoanchoryencadaelementotambin.Elvalordeesteatributoessiempreenlaformaxxyydondexxeselvalordeanclajehorizontalyyyeselvertical.

Trestiposdevaloressonsoportadosaqu,Elprimeroesunporcentaje.Asqueenelcdigodelreade textoelatributoanchor ledicequedebeserexpandidopara rellenar laventanahorizontalmente y que puede tomar un 60% del rea disponible en la ventana. Se puedeconfigurartambinunsolovalorqueespecificaelaltoyelanchoautomticamente.

Sepuedetambinespecificarunvalordedesplazamientoparaelatributoanchor.Estepuedeserpositivoonegativo.Elprimervaloresundesplazamientodesdeladerechadelcontenedor,yelsegundodesdeabajo.As,sielatributoanchorparaelreadetextofuera2575,indicaquesedebedibujarelitemalanchocompletodelaventanamenos25pixelsyelaltocompletodelaventanamenos75pixels.Aligualqueconporcentajes,ensulugarslopuedeespecificarunvalornico,yquesetomarcomoelderechodecompensacin,conelfondocompensadopordefectoa0.

Sepuedetambinespecificarunvaloranchorparaderecha,or,otroparaabajoob.Paraqueesto haga algo, sin embargo, el contenedor debe tener un tamao arreglado o debe serconfiguradalapropiedadanchorSize.

Tambinsepuedemezclarambostiposdevalores,porejemplounvalorde1080%significaqueelelementodebeserdibujadoalanchocompletodelcontenedormenos50pixelsdesdeladerechayal80porcientodelaltodelcontenedor.

CAP.6.Ventanasydilogos

6.1Elayeryelhoyconventanas

Entiempospasadosdelaweb,losusuariosdelossistemastradicionalespasaransutiempoingresando datos en listas y formas. Escogiendo tems de una lista de rdenes de compra,luegonavegandohacialosdetallesunayotravez.Elproblemaesqueestamoshablandodecientosdeentradasenunalistayvariosdetallesenlasformas.Lomsprobableeraque,enelejemplo anterior de rdenes de compra, se necesita ms subformas para mostrar toda lainformacinqueestdisponibleycadavezqueelusuariosemueveaotrapantallasetengaquerefrescarlapginacompletaytraertodoslosdatosdenuevodelabasededatos.

HoyconlosobjetosyherramientasqueExtJSnosprovee,podemosrealizarunmejortrabajo,tantoenpresentacinyobtencindedatoscomoenvelocidaddeaccesoalaspantallas.

Otra parte importante del rompecabezas que nos permite hacer esto son lasventanas y losdilogos,yaquenospermitenpresentarcualquierclasedeinformacinsinforzaralosusuariosanavegaraotraspantallas.

6.2Dilogos

Los dilogos son una poderosa herramienta para mostrar alertas, mensajes y errores alusuario, haciendo un buen uso de ellos logramos tener una buena comunicacin entre elsistemayelusuariocreandounainterfazamigableycmoda.

TodoslosdilogosdeExtJSsetomandelaclaseExt.MessageBoxoconelaliasExt.Msg.

6.2.1Alert

Ext JS nos provee con un excelente reemplazo a las alertas simples de JavaScript.Con lasiguientelneadecdigoveremoscomofunciona:

Ext.Msg.alert('Hey!','Algopasa!')

LaprimeracosaquenotamosesqueMsg.alert tienedosparmetros,mientrasque laalertaestndar tienesolouno.Elprimeronospermiteespecificarel ttulode laalertayelsegundoespecificaelcuerpo.Loquesedespliegaalejecutarelcdigoanteriores:

Comosepuedever,sufuncionamientoeselmismoquelaalertaestndarperotieneunamejorapariencia y esms verstil. Podemos tambin transmitirms informacin con la barra delttulo.MostrarMsg.alertnodetienetemporalmentelaejecucindelscriptcomolohacelaalertanormalhayqueserconcientesdeestocuandoseusalaversindeExtJS.

Tambin hay que tomar en cuenta que se puede usar solo un Ext.MessageBox al mismotiempo.Sisetratadeenviardosalmismotiempo,elprimeroserreemplazadoporelsegundo.

6.2.2Prompt

Otrocomponente tipodilogoesExt.Msg.prompt.Estenospermitecapturarunasimplelneade textode lamismaformaqueelpromptestndardeJavaScript.Sinembargo,en lugardelimitarseadevolverunvalor,nosdaalgunasopcionesms.

Ejemplo:

ConJavaScriptestndar:

vardata=prompt('Dimealgo')alert(data)

ConExtJS:

Ext.Msg.prompt('Hola!','Dimealgo',function(btn,text){

if(btn=='ok'){

vardata=textExt.Msg.alert('Tdigiste:',data)

}else

Ext.Msg.alert('Ohh','Nohasqueridodecirnada')},this,false,'')

Unavezms,Msg.promptpermitepasarun ttulocomoelprimerargumento,yelcuerpodeltextoeselsegundo.Eltercerargumentoesunafuncindedevolucindellamadaocallbackfunction en ingls, que puede ser llamada cuando cualquiera de los dos botones,Aceptar oCancelarseapresionado.La funcin tienedosargumentos,elbotnque fuepresionadoyeltextoquefueingresadoporelusuario.

Los otros tres parmetros de la funcin, son el objeto, un indicador demultilnea y unvalorinicial, respectivamente. El argumento demultilnea permite tener un rea de escrituramsampliaparaelprompt.

6.2.3Confirmation

El dilogo de confirmacin permite al usuario escoger entre una accin de confirmacin orechazoaalgunaaccin.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.UnainteresantediferenciaconlaconfirmacinestndardeJavaScriptesquedalasopcionesdeAceptaryCancelarynosoloSiyNo.

6.2.4Progress

Los anteriores tipos de dilogos eran un reemplazo a lo que ya exista en el JavaScriptestndar,ahoravamosaverundilogoms,desarrolladoporExt JS,queeseldilogodeprogreso.Ext.Msg.progress,estenoestdiseadoparaserusadoindependientementecomolos otros dilogos, y no necesita accin del usuario. De hecho, se puede disparar de lasiguienteforma:

Ext.Msg.progress('Hola!','Estamosesperando...','progreso')

Con esta declaracin estaremos esperando hasta que nos cansemos, porque es un dilogoque nunca progresa. Los dos primeros argumentos son el ttulo y el texto del cuerpo delmensaje,igualqueenlosanteriorestiposdedilogos,mientrasqueelterceroeseltextoqueaparecerenlabarradeprogreso.

Asqueparanoesperareternamente,debemosactualizarelmovimiento,paraesonosayudaelmtodoExt.Msg.updateProgress,creadosoloparaestepropsito.Acontinuacinunejemplodesuuso:

varcount=0varinterval=window.setInterval(function(){

count=count+0.04Ext.Msg.updateProgress(count)if(count>=1){

window.clearInterval(interval)Ext.Msg.hide()

}},100)

Este es un ejemplomuy artificial, en el que llamamos almtodo upgrateProgress cada 100milisegundosatravsdeuntemporizador,eincrementaelprogresousandolavariablecountcada vez. El primer argumento de este mtodo es un valor entre cero y uno, con cerorepresentamoselinicioyconunorepresentamoselfin,elsegundopermiteactualizareltextodelabarradeprogresoyelterceropermitecambiareltextodelcuerpodelmensaje.Actualizareltextopuedesertilsisedeseaproveerdeinformacinadicionalalusuario,oparamostrarlarepresentacindelporcentajecompletadodelprocesoactual.

Regresandoalejemplo,ntesequesehacereferencia tambinaExt.Msg.hide,conelfindelimpiarlabarradeprogresodelapantalla,yaqueelmtodoupdateProgressnomanejaesto,inclusosiseestableceelprogresoactualaunvalordemsdeuno.

6.2.5Show

Loscuatromtodosanterioresparacreardilogos,sonenesenciaaccesosdirectoshaciaunquintomtodo: Ext.Msg.show. Estemtodo toma un objeto de configuracin como su nicoargumento y las opciones de configuracin dentro de l permiten la creacin de unmessagebox que soporta todas las caractersticas disponibles a travs de los mtodosanteriores.Laformamssimpledeestemtodoes:

Ext.Msg.show({

msg:'IMPRESIONANTE.'})

EstaesunarplicamscercanaalaalertaestndardeJavaScript,peronoesfuncional,algomejorsera:

Ext.Msg.show({

title:'Hola!',msg:'IconosyBotones!IMPRESIONANTE.',icon:Ext.MessageBox.INFO,buttons:Ext.MessageBox.OK

})

Ahora tenemosotravezun ttulo,un textoenel cuerpo,peroahorahayun iconoyun solobotn.

Laformadeconfigurariconosybotonesesinteresante,sepasaunadelasconstantesqueExtJSproveeysepuedetenerunbotnpreconfiguradootambinsepuedeunautilizarunaclaseCSSquemuestreunicono.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 unaapariencia grfica a nuestros messageboxes, pero podemos hacer ms cosas. Lasmencionadas constantes de iconos son simplemente cadenas que representan nombres declaseselaboradasconCSS.Porejemplo,Ext.Msg.QUESTIONtienepordetrslaconfiguracinextmbquestion,quenoesmsqueunaclaseconfiguradadeCSS.EstoseencuentraenlashojasdeestilodeExtJS.Laconclusin lgicaesquesepuedetambinconfigurarnuestraspropias clases CSS para colocar en lugar de estas constantes, lo que permite granpersonalizacindelasreasparaiconos.

Las constantes de botones son un poco menos flexibles, y contienes objetos literalesespecificandocomodebenserdesplegados.Porejemplo,Ext.Msg.YESNOCANCELcontienelosiguiente(representadoenJavaScriptObjectNotationparafcillectura):

{cancel:true,yes:true,no:true}

Estoespecificaquelosbotones,yes,cancelynodebenserincluidos.Sepuedeusarestoparaapagarunbotnuotro,peronosepuedecambiarelordenenelqueaparecen,debidoaqueesunestndar.

Sinembargo,podemosajustarlosdilogosdeotrasmaneras.Esposiblecolocardimensionesauncuadrodedilogo,altoyancho.Estepuedesertilensituacionesdondese tengaquedesplegarunmensajemuygrandeysedebaevitarqueseextiendaalolargodelapantalla.

Elcuadrodedilogoshow,ysuobjetodeconfiguracinpermitenlaopcinclsparaespecificarunaclaseCSSparaaplicaralcontenedordeldilogo.UndesarrolladorpodrausarestopararemarcarcualquierobjetodelcontenedorusandoreglasCSS.

6.2.6ComportamientogeneraldeShow

Hasta el momento, las opciones de configuracin para Ext.Msg.show han sido solo deapariencia, pero hay algunas opciones que pueden ajustar el comportamiento. Si se usa lapropiedadprogress,entoncessepuedereplicareldilogoestndardeprogresodeExtJS:

Ext.Msg.show({progress:true})

Medianteelusodeesteconjuntodeopcionesconotrascomottuloycuerpodemensaje,sepuedecrearcuadrosdedilogobastantepersonalizados.

De formasimilar,elprompty lasopcionesdemultilneapermiten lacreacindecuadrosdedilogodeentrada:

Asquesepuedecrearuncuadrodedilogoqueaceptemltipleslneasdeingreso.Peroporomisinelvalormultilneaesfalso,sepuedelimitarelcuadrodedilogoaunasolalnea,etc.Sepuedehacercuadrosdedilogodeentradamuypersonalizados.

Otraopcinquecambiaelcomportamientopordefectodeuncuadrodedilogoesmodal.Estaopcinpermiteespecificarsielusuariopuedeinteractuarconloselementosqueestndetrs

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

Comohemosvistoantes,loscuadrosdedilogodeExtJS,nobloqueanlaejecucindelscript,comosucedeenJavaScript.Estosignificaquesepuedenusarcallbackfunctionsparadispararcdigo despus de que el dilogo es cerrado. Podemos hacer esto usando la opcin deconfiguracinfndeshow,queesllamadacondosargumentos,elcdigodelbotnquehasidopresionadoyel texto ingresadodentrodel campoeneldilogo (dondeeldilogo incluyeuncampo de entrada). Obviamente, para una alerta simple el parmetro del texto vendr enblanco,peroestafuncinproporcionadeformaconsistentetodalagamadecuadrosdedilogoquepuedensercreadosutilizandoExt.Msg.show.

6.3Ventanas

Cualquierusuariodecomputadorasesta familiarizadoconelconceptodeventanasunpanelinformativo que aparece en la pantalla para proporcionarms datos sobre las acciones delusuario actual. Ext JS aplica este concepto mediante el uso de la clase Ext.Window, unpoderosocomponentequesoportavariosavanzadosescenarios.

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, sinningunaconfiguracin,laventanasepuedearrastrarysepuedeajustarentamao,ademssetiene un til icono para cerrarla en la esquina superior derecha. Todava no es unademostracinmuyimpresionante,sinembargo,porquenuestraventanaenrealidadnomuestranada.

LaformamsfcilderellenarunaventanaesconelviejoyplanoHTML.Porejemplo:


height:150,width:200,title:'UnaVentana',html:'Ohhh

Holaatodosdesdeaqu
'
})w.show()

Se han aadido dos nuevas opciones de configuracin aqu. La primera es un ttulo quepermitecolocaruntextoenlabarrasuperiordelaventanaylasegundapermiteaceptarunacadenaHTMLquedespliegauntextoenlaventana.

El uso de este enfoque es inmediatamente evidente, se puede volver a lo bsico e inyectarcualquiercontenidoHTMLqueserequieradirectamenteenelreadelcontenedor.EstonospermitemodificarnuestraventanajustocercadelnivelmarcadoyproporcionarcientosdeCSSparaengancharelestilo.Anas,estonoesloqueseesperallegaratenerconExtJS.Haymuchasotrasopcionesquepermitirnllegaralodeseado.

6.3.2Unpanelconpotencia

Hay que recordar que Window es una subclase de Panel, y Panel tiene toda clase deinteresantes trucos bajo la manga. La opcin de configuracin tems, acepta un vector deobjetosdeconfiguracinuotrasinstanciasdecomponentes:


items:[{

xtype:'textfield',fieldLabel:'Nombre'

},newExt.form.TextField({

fieldLabel:'Apellido'})]

})w.show()

Enelejemplodearriba,sehanaadidodostextfields,elprimerousando inicializacinlazyconxtypeyelsegundousandounainicializacinestndar.Estosdostemssernaadidosalpanelinternodelaventana,perolamaneraenlaquesondesplegadospuedesercontroladaconlapropiedadlayoutdenuestraventana.

6.3.3Layout

ExtJSdefineunnmerodemodelosde layoutdentrodelpaqueteExt.layout ycadaunodeestospuedeserconunpanelparapermitirqueloscomponentesdentrodelseandispuestosdeunamaneraespecfica.Enelejemploanterior,seaadierondoscajasdetextoalaventana,peropodemosmejorarlaaparienciadelaventanasimplementeusandoellayoutapropiado.Eneste caso, necesitamos Ext.layout.FormLayout, que proporciona soporte para etiquetas y elespaciogeneralyelposicionamientoesperadoparaunaformaconcamposeditables:

varw=newExt.Window({layout:'form',items:[{

xtype:'textfield',fieldLabel:'Nombre'

},newExt.form.TextField({

fieldLabel:'Apellido'})]

})w.show()

Usando laopcindeconfiguracin layout,paraespecificarquesedesea tenerunpanel tipoform,sepuedeapreciarinmediatamenteladiferencia:

EstanoesunacaractersticadeExt.WindowyaqueprovienedelasuperclasePanel.Peroelhechodequeunaventanasoporteestacaractersticaesextremadamenteimportanteparaundesarrollador de aplicaciones, especialmente si tenemos en cuenta cunto tiempo tomaracrearunaformaricaconlatcnicadeinyeccindecdigoHTML.LasotraslayoutsdentrodelpaqueteExt.Layout,proporcionanmuchosmsenfoquesdediseoyexpansindeescenariosqueunaventanapuedesoportar.

Ademsparalasvariasmanerasderellenarunreadecontenidodeunaventana,tambinsetieneunagranflexibilidadcuandosetratadelaaparienciayelcomportamientodeuncuadrodedilogo.Haymuchasopcionesdeconfiguracinproporcionadosporlajerarquadelasuperclase Ext.Window, que empiezan con el Ext.Panel, al mismo tiempo que tiene una grancantidaddeopcionesdeconfiguracinpropias.

6.3.4Limpiandoventanas

En nuestro primer ejemplo de ventanas, se demostr que se tiene un gran nmero decaractersticasparareajustar,arrastrarlibrementeyademssetieneunbotnparacerrar.Yadentrodeunaaplicacin,puedenhaberventanasconestrictosdiseosdeconfiguracin,ynonecesitanser reajustables,por loquesepuedeevitarestecomportamientoseteandoelvalorfalse en la propiedad resizable. A menudo arrastrar, tambin es solo una cuestin depreferencia,yenmuchoscasosdejaractivadaestapropiedadpuedecausardaoyseramejordeshabilitarla.Loquequieredecirquehayvecesenlasquenoesnecesariamentefuncional,paramostrarcomo,tenemoselsiguienteejemplo:


height:50,width:100,closable:false,draggable:false,resizable:false

})w.show()

Cuandoseusaunaventanatipoforma,amenudoespreferibledisponerdebotonesdetextoparaexplicarlasdiferentesacciones,porejemplo,sepuedegrabarunregistroocancelaralgncambioquehayasidorealizadoyenalgunoscasos,elbotncerrarpuedeserdeshabilitado,colocandolaopcinclosableafalse.Hayunasegundaopcinquedaunpocomsdecontrolsobreestecomportamiento:closeActionpuedeserconfiguradaparacuandodeseamosocultary no cerrar nuestra ventana, con hide simplemente se hace que desaparezca la ventana,mientrasqueconclose,seremuevelaventanadelDOM.Estaesunaimportantediferenciasi

sedeseareutilizarlaventanadespus,yaqueesconderlaventanaparamostrarlacuandosenecesiteesmseficientequerecrearlacadavez.

6.3.5Losextras

Conlasopcionesdeconfiguracinbajocontrol,sepuedenrevisarlasmanerasenlasquesepuedemodificaryaumentarlascaractersticasdelaExt.Window.Yasehademostradoelusode las opciones height y width, para configurar las dimensiones de la ventana y recortarcualquiercontenidoqueexcedaestasdimensiones.

SetienentambinotrasopcionescomoautoheightyautoWidth,querecibenvaloresbuleanos,quepermitenrellenarlaventanaconcomponentessintenerquepreocuparsedeasegurarquelosvaloresdeanchoyaltoseansiemprecorrectos.Estoesrealmentetilduranteeldesarrollo,cuandoespocoprobablequesetenganencuentalasdimensionesexactasdeloqueseestcreando, solo se debe colocar true en las propiedades autoheight y autoWidth. Anmejor,estasopcionessepuedenusarseparadamente, loquepermitecolocarunanchofijoperosepuede colocar un largo ajustable y viceversa. Esto es til si se est colocando contenidodinmicoen laventana,peroenestecaso,hayque estar segurosde lasdimensionesde laventananoexcedernlosladosdelapantalla.

6.3.6Funcionandodentrodeunescritorio

Elejemplomsgeneralizadodeunsistemadeventanaseselquenosmuestraunescritoriodecomputadora, convariasventanasque representanaplicacionesoelementosdel sistemadearchivos.Endichossistemas,losusuariospuedenesconderventanasparausarlasdespus,opuede minimizarlas ellos tambin son capaces de expandir las ventanas hasta llenar lapantalla o maximizarlas. Estos son trminos familiares y por supuesto son soportados porExt.Windowatravsdelasopcionesdeconfiguracinmaximizableyminimizable.

Estas caractersticas estn deshabilitadas por defecto, pero pueden ser de utilidad paratrabajarenambientes tipoescritorio.Cuandoseconfigurancon true,vanaaparecernuevosiconosenlapartesuperiorderechadelaventanadeformasimilaralasventanasdelsistemaoperativoMs.Windows.Lapropiedadmaximizablepermitequelaventanaseexpandayllenetodo el espacio disponible en laventana del explorador, como se espera, pero la propiedadminimizable, es un poco ms difcil. Ext JS no sabe donde se va a esconder la ventanaminimizada,queenelcasodelsistemaoperativoMs.Windowsseraalabarradetareas,peropara otros sistemas operativos podra ser en otro lugar. Por lo que se debe programar lafuncionalidaddeminimizaramano,ExtJSproveesolouniconoparaelminimizadoyeleventominimizar que debe ser manejado de manera apropiada para la aplicacin que se estdesarrollando, paraminimizar una ventana de Ext JS, hay que utilizar CSS y programacinadicional.

6.3.7Otrasopciones

LaclaseExt.Window, tieneotrosmediosparacambiarelestadorealde lasventanas,yestintegradotododentrodelframework.Lapropiedadbuleanacollapsible,aadeotrobotna lapartesuperiorderechadelaventanaypermitealusuarioencogerlaparaquesemuestresololabarrasuperior.Unsegundoclicexpandelaventana,regresndolaasuestadooriginal.

Se puede usar tambin la configuracin expandOnShow para especificar que una ventanaescondida 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 sertradasdevuelta.

Ademsdelabarradettuloestndaryelreadecontenidodelcuerpo,sepuedeaadirmsreas de contenido a una ventana. Algunas de estas reas pueden ser completamentepersonalizadas,yalgunassonunpocomsrestrictivas,perojuntasestaspropiedadessonotromtododecrearventanas funcionales.

Dependiendo de los requerimientos, se puede escoger usar una o ms de estas reas decontenidoparaproporcionarherramientasquepermitanalosusuariosmanipularyconsumirlainformacin dentro de las ventanas.Un tpico ejemplo podra ser crear una ventana con unlayout tipo form, que incluye los botones deGrabar yCancelar en el pie de lamisma.Estorefleja el estilo tpico de una forma de entrada de datos, y puede ser posicionadaautomticamentepormediodeExtJSconunapequeaconfiguracin.

6.3.8Manipulacin

Cuandonuestrasventanasestnenlapantalla,tenemosunrangodemtodosquepuedenserusados para cambiar su posicin, apariencia ycomportamiento.De hecho, ya hemos usadounodeestosmtodosennuestrosejemplosshowqueesusadoparadesplegarlaventanaenprimer lugar.Aunquehemosusadoshowen lamayoradeejemplos,estemtodopuedetenertresargumentos,todossonopcionales.

w.show('animTarget',function(){

alert('Ahoramostrando')},this)

Primeramente, podemos especificar une elemento, o el ID de un elemento, para formar elpunto de partida desde el que la ventana deber animarse cuando se abra. Este efectocosmticopuedetambinserespecificadousando laopcindeconfiguracinanimateTarget.Elsegundoargumentoesunacallbackfunction,quesedisparacuando lapresentacinde laventana se ha completado, y el tercer argumento es simplemente el mbito definido para lafuncinqueseejecutar.Resultqueelmtodoshownoeratansimpledespusdetodo.

Elobviocompaerodeshoweshide.Enefecto,estetomalosmismosargumentos,yharquelaventanadesaparezcade lapantallaparasuposterioruso.Siseestsegurodequenosenecesitarlaventananuevamenteentoncesesprobableusarelmtodoclose,queremuevealaventanadelDOMyladestruye.

Lafuncionalidaddelosmtodoscloseyhide,semanejanparalosiconosdelaventana.Hayunpocomsdemtodosquepermitentenercontrolsobrelostems,queyahemosvistocomosonminimizeymaximize.Estafuncionalidadbsicaseaumentaconelmtodorestore,queesusado despus de maximizar y retorna la ventana con sus dimensiones originales, ytoggleMaximize,queessimplementeunaccesodirectoentremaximizeyrestore.Yentrminosde configuracin, para que la ventana retorne a su configuracin inicial, usamos el mtodocenter,quecolocalaventanaenelmediodelaventanadelexplorador.

Tambin se puede manipular la posicin de nuestras ventanas, alignTo permite a undesarrolladorpormediodecdigo,moverunaventanaprximaaotroelementoespecificado.

Estemtodotienetresparmetros:

Elelementoalquesevaaalinearlaventana. Laposicindealineamiento Unaposicindedesplazamiento,especificadaenunarraytipo[x,y]

Estemtodoestilcuandose tieneunaaplicacinconunespaciode trabajodinmico,ysenecesitaasegurarsedeque laventanaaparezcaenel correcto lugaren relacinaotro temque ha sido desplegado previamente. Un til complemento para esta caracterstica es el

mtodo anchorTo, que toma los mismos argumentos y permite a una ventana permaneceranclada a otro elemento, incluso cuando la ventana del explorador ha sido cambiada detamaoodedesplazamiento.

Sibienmuchosde losmtodosde laclaseExt.Window simplementeproporcionanaccesoauna funcionalidad existenteva cdigo, haymuchos otrosms que proporcionan avanzadosescenariosqueseradifcilelaboraramano.

6.3.9Eventos

Casitodaslasaccionesquehemoscubiertohastaahoratienensuspropioseventos,quesirvenparacorrernuestropropiocdigopersonalizado.Eleventominimize,esunodelosquehemosmencionadoantes,porquesedebemanejarmanualmenteesteeventosisedeseaqueeliconodelaventanarealicealgo.Idealmente,seesperaquelaventanasealmaceneenunaespeciedereaestilotaskbarparadespusrestaurarla.


height:50,width:100,minimizable:true

})w.on('minimize',doMin)w.show()

Enelejemplodearriba,estamoscreandounanuevaventana,cuyapropiedadminimizable,secoloca en true, y entonces aadimos un evento para que el minimizado funcione, para acontinuacinmostrar laventanaen lapantalla.La funcinquemanejaresteeventoesalgoas:

functiondoMin(){

w.collapse(false)w.alignTo(document.body,'blbl')

}

Nosotrossimplementeledecimosalaventanaquesecolapseenlapartedeabajomostrandosololabarradelttulo(pasandounparmetrobuleanoconvalorfalsequesimplementeindicaquenodebeanimarlaventana)yentoncesusamoselmtodoalignTo,discutidopreviamente.Conlosparmetrosquehemoselegido,laventanasealinearenlaparteinferiorizquierdadelcuerpodeldocumento,talcomolohicieraunaventananicaenunabarradetareas.

Porsupuesto,sise tuvieramsventanas, terminaramosconunasuperposicinenpilaenlaparte inferior izquierda lo cul no es ideal en aplicacin del mundo real. Sin embargo, elejemplomuestracomosedebemanejareleventodeminimizado,ypuedeserusadocomounaalternativaalmtodocolapsar.

CAP.7.Toolbars,Botonesy Mens

7.1Creacindebarras

7.1.1Toolbars

Una barra de herramientas o toolbar en ingls, se puede colocar en cualquiera de loscontenedoresantesrevisados,yaseaunpanel,unaventana,untabpanelounaforma.

Todosloscontenedorestienendosbarras,unaarribayotraabajo,sepuedencolocarlasdosouna sola de las dos, la opcin de configuracin para cada una es de la siguiente forma, secolocadentrodelaspropiedadesdecualquiercontadorlosiguiente:

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

Lacreacindeunbotnesbastantesencilla laprincipalopcindeconfiguracinesel textoquesedesplegarsobreelbotn.Sepuedeaadirtambinuniconoparaserutilizadojuntoaltextosisedeseahacerlo.Acontinuacinlasintaxis:

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

}

Estebotnsedebecolocarenunabarrasuperioroinferior,delasiguienteforma:


title:'Miventana',height:500,width:500,

tbar:[{

xtype:'tbbutton',text:'Clickme'

}]})

7.1.3Men

Unmen,noesnadamsqueunbotnconunmendesplegable,esmuysimple tambin.Los temsdelmentrabajanconlosmismosprincipiosde losbotones.Puedentener iconos,clasesymanejadoresasignadosaellos.Lostemsdelmenpuedentambinagruparsejuntosparaformarunconjuntodebotones,peroprimerosedebecrearunmenestandar:

Estaeslaconfiguracintpicaparaunmen:

{xtype:'tbbutton',text:'Button',menu:[{

text:'Better'},{

text:'Good'},{

text:'Best'}]

}

Comosepuedever,unavezque laconfiguracindel arraydemensestdesarrollada, losmenscobranvida.Paraagruparestostemsdemenjuntos,senecesitacolocarlaopcindeconfiguracingroupconunvalorigualparacadagrupoquesedeseecolocar,ademssedebecolocarbuleanopositivoparacadaitem:

{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

Elbotnsplitesunbotnestndarynoesunmencombinado,conunpequeogiro.Perousandoestetipodebotn,sepuedeusarlafuncionalidaddeunbotn,mientrasqueseaadelaopcindeseleccionarunitemdelmenadjunto.Alhacerclicenlaparteizquierdadelbotnque contiene el texto, se activa la accin del botn. Sin embargo, al hacer clic en el ladoderechodelbotn,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 hayconfiguracindealineamientoparaunabarra,porlotantosisedeseaalineartodoslosbotonesaladerecha,senecesitaaadirunespaciolleno,comoelprimerelementodeunabarra.Sisequieretenertemsdivididosentreellosalaizquierdayaladerecha,tambinsepuedeutilizarunespaciolleno:

{xtype:'tbfill'

}

Sedebecolocaresteelementoenunabarradondesedeseeaadirunespacioyserequieraquelostemsseanempujadoshaciaelfinaldelabarra.

Tambinsepuedecolocarseparadoresconunospocospixelsdeespaciovacoquepuedenserusadosparadarespacioentrebotones,omoverloselementosfueradelbordedelabarra:

{xtype:'tbspacer'

}

Undivisortambinpuedesercoladodelamismaforma:

{xtype:'tbseparator'

}

7.1.6Accesosdirectos

ExtJStienevariosaccesosdirectosquepuedenserusadosparahacercdigomsrpido.Losaccesosdirectossonunoodoscaracteresquepuedenserusadosen lugardeunobjetodeconfiguracin.Porejemploconsiderandounllenadoestndardeunabarra:

{xtype:'tbfill'

}

Elaccesosparaunllenadodeunabarraesunguinconunsmbolodemayorque:

>

Notodoslosaccesosdirectosestndocumentados.Aquestlalistadelosaccesosdirectosdeusocomn:

Componente Accesodirecto Descripcin

Llenado '>' Elllenadoofilleningls,esutilizadoparaempujarhacialaderechalostemsdeunabarra

Separador '' Esunabarraverticalqueesusadaparavisualizarlostemsdeformaseparada

Espaciador ''Espacioenblancousadoparasepararvisualmentelostems.Elespacioesdedospxeles,perosepuedecambiarreemplazandolaclaseCSSytbspacer

Textodetem Cualquiertexto AgregacualquiertextooHTMLdirectamenteenlabarradeherramientasconsolocolocarestetextoentrecomillas

7.1.7Botonesdeiconos

Elbotnestndarpuedeactuarcomounbotndeiconooiconbuttoneningls,comolosquesevenen loseditoresde textoparacolocarnegritaso itlicas.Senecesitandospasosparatransformarunbotnsimpleenunbotnconicono:

Sedebedefinirlaimagenqueserusadacomoicono Yaplicarlaclaseapropiadaalbotn

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

}

Tambinpodramoscolocaruniconoaladodeltextodeunbotndelasiguienteforma:

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

}

7.1.8Manejadoresdebotones

Un botn necesita hacer ms que solo lucir bonito, necesita reaccionar a una accin delusuario.Aquesdondeentranenaccinlosmanejadoresohandlerseningls.Unhandleresunafuncinqueesejecutadacuandounbotnoitemdemenespresionadoconunclic.

Laconfiguracindelhandleresdondeseaadeunafuncin:

{xtype:'tbbutton',text:'Mensaje',handler:function(){Ext.Msg.alert('Mensaje','Enviadodesdeelboton')}

}

Estecdigodesplegarunmensajetipoalertaaldarclicalbotn.Algunasvecessenecesitaqueserealicencambiosalbotncuandosepresiona,esasqueelmanejadordelbotnpasauna referencia a s mismo para este propsito. El primer argumento de la funcin es unareferenciaalcomponentequedisparaelevento.

{xtype:'tbbutton',text:'Boton',

handler:function(f){f.disable()}}

Sepuedetomarestareferenciaasmismoyaccederatodaslaspropiedadesyfuncionesdelbotn.Porejemplo,alllamaralafuncindisable(),elbotnsetransformaacolorgris.

7.1.9Cargarcontenidoconelclicdeunbotn

Vamosahaceralgomstil enel clicdeunbotn.Paraeste ejemplovamosaaadirunaopcin de configuracin a cada tem de un men que ser usado para determinar quecontenidodearchivosecargarenelcuerpodeunapgina:

{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
http://www.desarrolloweb.com/http://www.tierradenomadas.com/tw006.phtml

Documents

curso extjs