-
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:{
yes:true,no:true,cancel:true
}})
}
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL='images/s.gif'fDondeEsta()
})
-
Si estamos pensando realizar una aplicacin grande, es buena idea
hacer 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.
varprueba=newFuncionPrueba({
segundaPalabra:'argumentos'})
varprueba=newFuncionPrueba({
segundaPalabra:'argumentos',cuartaPalabra:'wow'
})
3.8.3Queselobjetodeconfiguracin?
SiseestfamiliarizadoconCSSoJSON,sepuedenotarqueelobjetodeconfiguracinlucesimilaracualquierdeestosdos,sobretodoporqueeslomismo.Elobjetodeconfiguracinessolounaformadeestructurardatosquepuedeserfcilmenteinterpretadaporloslenguajesdeprogramacin,enestecasoJavaScript.
Porejemplo,veamoslaporcindelaconfiguracindelnuestroejemplo:
{title:'Javier',msg:'Hasvistomicomputadora?',buttons:{
yes:true,no:true,cancel:true
},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:
varpanel=newExt.Panel({
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:
varpanel=newExt.Panel({
title:'MiprimerTableLayout',layout:'table',height:400,layoutConfig:{
columns:2},items:[
-
{html:'Columna1,Celda1',width:200,height:200
},{
html:'Columna2',rowspan:2,width:200,height:400
},{
html:'Columna1,Celda2',height:200
}]})
5.2.6AnchorLayout
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:
varw=newExt.Window({
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:
varw=newExt.Window({
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:
varw=newExt.Window({
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.
varw=newExt.Window({
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:
varw=newExt.Window({
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