Aprendiendo Ext JS 3

Una ventana flotante Más videos

Descripción del tema

Las ventanas son muy útiles para desplegar formularios o información que nos interese, en este tema veremos algunas propiedades y métodos importantes para usar ventanas en nuestras aplicaciones.

Material de apoyo

Para continuar es necesario descargar el material de apoyo, donde únicamente viene un HTML que incluye la librería de Ext JS, y un JS que esta vacío.

Empaquetando

Es una buena practica “empaquetar” el código que escribiremos, ya hemos discutido las razones anteriormente.
//the namespace for this tutorial
Ext.ns('com.quizzpot.tutorial');

//the blank image
Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';

com.quizzpot.tutorial.Window = {
	init: function(){
		//code goes here
	}
}

Ext.onReady(com.quizzpot.tutorial.Window.init,com.quizzpot.tutorial.Window);
Escribiremos el resto del código dentro de la función “init”, de esta manera evitamos futuros problemas.

Una ventana básica

El componente “Ext.Window” hereda los métodos y propiedades del componente “Ext.Panel” esto quiere decir que las propiedades que usamos para los paneles también las podemos utilizar para las ventanas, además podemos utilizar algunas otras propiedades que son únicas del componente Window. Para crear una ventana necesitamos únicamente 3 propiedades de configuración, el título, el ancho y el alto.
var win = new Ext.Window({
	title: 'First window!', //the title of the window
	width: 300,
	height:250
});
//displaying the window to the user
win.show();
Ventana

Ventana básica

El código anterior muestra como crear una ventana en su forma más básica, es importante mencionar que una vez que hemos creado una “instancia” del componente “Window” necesitamos invocar el método “show” para que la ventana aparezca en pantalla.

Otras configuraciones

Por defecto las ventanas aparecen al centro de la pantalla, podemos modificar su posición especificándole la propiedad x,y; también podemos hacer que la ventana sea modal, es decir que todo el fondo sea cubierto por una capa transparente color gris permitiendo enfocar la atención únicamente en la ventana, también podemos hacerla maximizable y minimizable configurando las propiedades que se muestran a continuación.
var win = new Ext.Window({
	title: 'First window!',
	width: 300,
	height:250,
	minimizable: true, //show the minimize button
	maximizable: true, //show the maxmize button
	modal: true, //set the Window to modal
	x: 100, //specify the left value of the window
	y: 100 //specify the top value of the window
});
//display the window in the screen
win.show();
Ventana modal

Botón minimizar, maximizar y es modal

Minimizar una ventana

Es importante mencionar que se debe implementar la funcionalidad del botón minimizar ya que las ventanas no lo tienen definido por defecto, esto nos da la libertad de implementar dicha funcionalidad dependiendo de nuestras necesidades. Para lograrlo vamos a poner un "listener" al evento "minimize" de la siguiente manera:
var win = new Ext.Window({
   title: 'Quizzpot.com',
   width: 500,
   height:350,
   minimizable: true,
   maximizable: true,
   html: ''
});   
win.show();

//fire when the user clicks the minimize button
win.on('minimize',function(w){
   console.debug('minimizando...');
   w.collapse(); //collapse the window
});
El código anterior crea un "listener" que se ejecuta cuando el usuario da click en el botón minimizar de la ventana, en ese momento se dispara la función definida que unicamente colapsa la ventana, hay que aclarar que cada quien hace lo que necesite o requiera dentro de esta función.

Contenido

Para asignarle contenido a una ventana se hace de la misma forma que los paneles:
  • Usando la propiedad “html” y escribiendo el html directamente.
  • Usando la propiedad “contentEl” tomará un “id” de un elemento previamente cargado en el HTML y se lo asignará como contenido a la ventana.
  • Usando la propiedad “autoLoad” o el método “load” para cargar el contenido utilizando Ajax.
  • Utilizando la propiedad “items” y asignándole un arreglo de componentes Ext JS.
Ya hemos estudiado más a detalle los puntos anteriores, te recomiendo darle un repaso al tema anterior (paneles) en caso de tener dudas.

Cargando sitios externos

Si necesitamos desplegar algún sitio externo como Google o Yahoo, podemos utilizar un iFrame para cargar el sitio, esto lo hacemos utilizando la propiedad “html” de la siguiente manera.
var win = new Ext.Window({
	title: 'First window!',
	width: 500,
	height:350,
	minimizable: true,
	maximizable: true,
	html: '<iframe src="http://www.quizzpot.com" style="width:100%;height:100%;border:none;"></iframe>'
});

var win2 = new Ext.Window({
	title: 'First window!',
	width: 500,
	height:350,
	minimizable: true,
	maximizable: true,
	html: '<iframe src="http://www.google.com" style="width:100%;height:100%;border:none;"></iframe>'
});

win.show();
win2.show();
Ventana con sitio externo

Ventana con sitios externos

Conclusiones

En este tema se puede observar como se utiliza la herencia correctamente, ya que una ventana es prácticamente un panel con funcionalidad extras como Drag, botones de maximizar y minimizar, además cuenta con los mismos métodos que el panel para asignarle contenido. Si tienes alguna duda o sugerencia puedes hacerla en los comentarios, además te invito a inscribirte al foro para compartir tu conocimiento con la comunidad que se está creando.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

54Comentarios

  • Avatar-5 Crysfel 12/05/2009

    El video lo subo mas al rato :D

    • Avatar-10 ReyJorge 14/05/2009

      Una pregunta, yo he creado una entana y usado el layout para usarlo como contenedor de un formulario, pero no se como enviar el formulario :S

      • Avatar-4 Crysfel 14/05/2009

        Puedes usar el método "submit" del formulario (formPanel.getForm().submit({url:'...'})), ahí especificas la url y puedes poner un mensaje de espera, si tienes mas dudas te recomiendo registrarte en el foro y hacer ahí la pregunta, pues allá podemos platicar mejor ;) saludos

        • Avatar-11 ReyJorge 14/05/2009

          Es e agradecer que contestes tan rapido ^^

          • Avatar-7 Xiz 15/06/2009

            Macho haber si te haces un curso de JQUERY O MOOTOLS asi de bueno.. eres muy didactico se te entiende muy bien lo que explicas. Bye

            • Avatar-3 Crysfel 16/06/2009

              Esa es la idea, mas adelante habrán mas cursos :D saludos

              • Avatar-7 Elias 15/07/2009

                Que increible, rikisima estan esas ventanas

                • Avatar-7 Patricio 30/07/2009

                  mi consulta va, que si yo dentro de mi ventana win o panel de extjs, cargo un iframe,con una pagina que contenga un mensaje(alert de extjs),sabes como espandir su mascara o sombra para que cubra toda la pantalla del explorador.

                  • Avatar-3 Crysfel 30/07/2009

                    Tendrías que generar ese mensaje fuera del iframe, en el documento padre, recuerda que un iframe es un documento aparte.

                    • Avatar-1 Jesus Manuel Olivas 15/09/2009

                      Por si alguien se interesa como utilizar el boton de minimize p hacer el expand en caso de estar minimized window1.on('minimize',function(w){ if (w.collapsed) w.expand(); else w.collapse(); });

                      • Avatar-3 Crysfel 17/09/2009

                        Gracias por la aportación :D

                        • Avatar-2 asdfsda 22/01/2010

                          una asquerosidad de ejemplo el window.js no tiene nada PERROS

                          • Avatar-5 Crysfel 22/01/2010

                            No descargaste el código fuente, solamente has descargado el material de apoyo el cual (si leyeras el tutorial) se usa a lo largo de tutorial, necesitas descargar el "código fuente" para ver el código completo. Saludos

                            • Avatar-12 Alirio 28/02/2010

                              Buen dia, quisiera saber si se puede quitar el boton "x" de cerrar la ventana. Gracias

                              • Avatar-4 Crysfel 01/03/2010

                                Si, solamente necesitas configurarlo de la siguiente manera: "closable: false" saludos

                                • Avatar-6 Migue 03/03/2010

                                  Hola soy estudiante de informatica y se me ha prsentado un problema en mi proyecto, ¿Como puedo posicionar un boton en un formPanel? S@lu2s, Migue

                                  • Avatar-2 Migue 03/03/2010

                                    Hola soy estudiante de informática y se me ha presentado un problema en mi proyecto, ¿Como puedo posicionar un botón en un formPanel? S@lu2s, Migue

                                    • Avatar-5 Crysfel 03/03/2010

                                      En la configuración del FormPanel existe una propiedad que se llama "buttons" que recibe un arreglo con los botones que necesites. Saludos

                                      • Avatar-10 Migue 04/03/2010

                                        Si eso lo entendi, pero el esta propiedad solo me sirve para añadir botones a el footer del panel en cuestión y yo lo que quiero es posicionar un boton como tal en cualquier lugar, trate con --style: 'margin 20 0 0 0'-- que me lo ubicaria segun top left bottom right pero de esta forma no me funcionó.

                                        • Avatar-5 Sergio Quezada 05/04/2010

                                          Amigo sabes cuando guardo y abro el windows.html y cuando ejecuta el js me dice que Ext no esta definido ayudae porfavor espero tu respuesta

                                          • Avatar-3 Crysfel 05/04/2010

                                            Asegurate de que tengas importado correctamente la librería de ExtJS, el error que te esta dando es porque no encuentra la librería. Saludos

                                            • Avatar-6 Migue 06/04/2010

                                              Hola nuevamente escribo por la interrogante que había hecho hace unos días atrás <b>¿Como puedo posicionar un botón en un FormPanel?</b> y la respuesta era la misma que había dado lo único que había un error y era por la falta de dos puntos suspensivos quedaría así: <b>style:'margin 50 50 50 50'</b> que lo ubicaría top left bottom right

                                              • Avatar-1 Migue 06/04/2010

                                                Discúlpenme es así me faltaron los dos puntos: <b>style:’margin: 50 50 50 50?</b> que lo ubicaría top left bottom right

                                                • Avatar-9 Antonio 13/05/2010

                                                  en el caso para minimizar la ventana con el metodo collapse que trae implementado el framework no entiendo la funcion de "w" para que se pone ?

                                                  • Avatar-8 santiago 16/05/2010

                                                    buenas, pero es que mi ventana siendo sencilla no me aparece, antes no me salia nada pero ahora meaparece el titulo y enla parte de abajo un pequeño rectangulo amarillo bueno eso solo en chrome y firefox ayuda

                                                    • Avatar-10 Kevin Angulo 18/08/2010

                                                      Hola Crysfel, primero para que te ubiques en el contexto, supongamos que tenemos un viewport inicial que tiene en el panel izquierdo un tree y que la aplicacion al inciar, si verifica que no tenie nada cargado en el arbol, despliegue automaticamente una ventana para agregar un nodo a ese arbol. La Pregunta es la siguiente: Como hago una vez que la ventana se cierra mandar a recargar el tree estando el codigo del viewport y el de la ventana en namespaces distintos? es algo como llamar eventos entre namespaces? Gracias de Antemano

                                                      • Avatar-10 Crysfel 18/08/2010

                                                        En verdad no importa si tienen un namespace diferente, la comunicación entre componentes la realizas mediante los eventos que ocurren entre ellos. Saludos

                                                        • Avatar-10 chente 08/09/2010

                                                          andale esta de lujo esta onda de las ventanas,

                                                          • Avatar-3 pedro carvajal 04/10/2010

                                                            hey eh colcoado todo como esta ene l video y a la hora de provar el window.html no carga la ventana :S

                                                            • Avatar-6 Crysfel 05/10/2010

                                                              Has descargado y cambiado las referencias a la librería de ExtJS adecuadamente? saludos

                                                              • Avatar-10 Jose 06/10/2010

                                                                Hola Crysfel quisiera preguntarte porque mi ventana extjs no se muestra en la pantalla del navegador solo veo que se ha cargado correctamente con el firebug pero no se dibuja en la pantalla a que se deb como podria solucionarlo.

                                                                • Avatar-5 armando jonathan 23/10/2010

                                                                  Saludes no me aparece la parte de arriba de la ventana flotante

                                                                  • Avatar-11 Renat 22/11/2010

                                                                    Hola! Disculpa pero la parte en donde tiene q aparecer el botón maximizar y cerrar no aparece solo aparece el contenido de la ventana. Otra cosa no funciona solo con window.js me pide tambien ext-all.js y ext-base.js. saludos

                                                                    • Avatar-11 Crysfel 22/11/2010

                                                                      Si importas el ext-all.js y el ext-base.js no es necesario importar nada más! Saludos

                                                                      • Avatar-9 Conrado 16/01/2011

                                                                        Hola Crysfel muy buenos los tutoriales!!! Quería saber si es posible crear ventanas que tengan las mismas propiedades que las del ExtJS WebDesktop. Es decir que tengan un "limit" de movimiento en la pantalla, que cuando haga "resize" en vez de aparecer lineas punteadas aparezca en azul el area, etc. O bien si es más fácil editar el script del ExtJS WebDesktop.. Desde ya muchas gracias por todo! Saludos!

                                                                        • Avatar-11 Crysfel 18/01/2011

                                                                          Si es posible, simplemente configura las propiedades adecuadas, te recomiendo darle un vistazo al API, en verdad que no es complicado. Saludos

                                                                          • Avatar-9 Joseph 10/02/2011

                                                                            Hola!! primero felicitarte por tu trabajo y luego preguntarte: x: Math.random()*700, y: Math.random()*300, Que deberia cambiar ahi para poner al centro la ventana. Gracias!

                                                                            • Avatar-5 Joseph 10/02/2011

                                                                              Deseeo abrir la ventana 1 al darle clic a un enlaze como tendria que hacer? Gracias

                                                                              • Avatar-8 Josue83 12/02/2011

                                                                                Como hago para que aparezca la ventana inicialmente en la parte inferior derecha?

                                                                                • Avatar-8 pipetabor 07/06/2011

                                                                                  hola, primero que todo exelente este sitio, felicitaciones y gracias, segundo, tengo problemas al cargar un Ext.Viewport dentro de una ventana flotante como las del articulo, podrias ayudarme?

                                                                                  • Avatar-9 LOKY 13/09/2011

                                                                                    buenos dias muchachos una pregunta yo quiero colocar un botón después de una caja de texto como lo puedo hacer , este botón lo que haría seria multiplicarme las cajas de texto para de esta manera si quieren consultar por varios numero de cédula o varios nombres lo puedan hacer en fin de antemano muchas gracias les agradezco si me dicen si si puede o no es un poco urgente

                                                                                    • Avatar-12 LOKY 16/09/2011

                                                                                      gracias muchachos en todo caso ,lo logre y aunque me tarde 4 días lo hice jjajajajjajajjajajajja "La ciencia no nos ha enseñado aún si la locura es o no lo más sublime de la inteligencia."

                                                                                      • Avatar-8 Roger 18/10/2011

                                                                                        Hola, mira yo una aplicación utilizo extjs con cakephp, tengo un web WebDesktop como el de los ejemplos de extjs, y en cada una de mis ventanas, pongo iframe que me llevan al contenido a través de mis controller, mis vistas son ficheros javascript con mas código extjs que hacen otras acciones, esto me funciona bien, pero quiero optimizarlo un poco porque para que funcione el contenido de extjs dentro del iframe tengo que volver a cargar los ficheros js de extjs (ext-all.js, ect), mi pregunta es si hay otras formas de simular esto, eh probado con el autoload y me pone el contenido de la ventana en el body del html padre, y no funciona nada.

                                                                                        • Avatar-12 juan manuel 22/11/2011

                                                                                          tengo una ventana que quiero minimizar en mi barra de menu y no se como puedo hacerlo.... la puedo colapsar pero lo que necesito es que se quede en la barra de tarea. las ventanas las cargo por medio de funciones ej: function merlin() { var merlin = new Ext.Window({ minimizable: true, maximizable: true, maximized:true, shim:false, animCollapse:false, collapsible : true, constrainHeader:true, html:'' }); merlin.show(); merlin.on('minimize',function(w){ console.debug('minimizando...'); w.collapse(); }); } esta es llamada desde aqui text:'Merlin', icon: 'images/merlin.png', handler : merlin, scope:this

                                                                                          • Avatar-10 diego 24/05/2012

                                                                                            buenas, tengo una consulta, me gustaria mostrar esta ventana despues de presionar un boton, no que figure siempre al principio por defecto, me podrian ayudar? gracias, muy buen aporte

                                                                                          • Avatar-2 ero 29/10/2013

                                                                                            Anunciosero

                                                                                            • Avatar-1 veronica luna 31/12/2013

                                                                                              muy bueno el post, me fue de mucha ayuda, espero sigan haciendo publicaciones. Saludos cordiales y muchas bendiones

                                                                                              • Avatar-10 LeoJerez 14/01/2014

                                                                                                Hola. Soy nuevo con ExtJs, tengo una duda con respecto a que trato de abrir mi ventana flotante desde otro archivo .js y efectivamente se abre la ventana, pero pierde la propiedad modal: true. Mi ventana se crea con el Ext.onReady y es llamada haciendo uso de su ID desde otro js como indiqué arriba

                                                                                                • Avatar-1 George 24/03/2014

                                                                                                  hola estoy cargando una webform dentro del ext:window, lo carga correctamente pero cuando presiono el boton cerrar que esta definido en la webform no funciona, otra cosa es que cuando levanta la pagina no esta reconociendo los caracteres especiales como: las tildes, ñ, etc

                                                                                                  • Avatar-11 Alberto Ocampo 13/10/2015

                                                                                                    Hola buenos dias. Alguien sabe porque no me aparecen las imagenes de los botones cerrar, maximizar, y minimizar?? Saludos

                                                                                                    • Avatar-1 Alberto Ocampo 13/10/2015

                                                                                                      Ya pude, gracias. Lo que pasa es que en el style ext-all.css apuntaba la url de las imagenes a la carpeta resources/themes/images... y pues no la tenia agregada a mi proyecto :s pero ya quedo. Muchas gracias.

                                                                                                    • Avatar-6 Josue Seijas 22/08/2016

                                                                                                      Muchas gracias por el aporte del curso. Este error que desplega la consola a que se debe? Refused to display 'https://www.google.co.ve/?gfe_rd=cr&ei=pR-7V6DfD6qw8we59ZTYDw&gws_rd=ssl' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

                                                                                                      • Avatar-5 jos.cabreraq 02/02/2018

                                                                                                        necesito que una imagen con botones se minimice y maximice y lo otro con barritas se mueva gracias.

                                                                                                        Instructor del curso

                                                                                                        Crysfel3

                                                                                                        Autor: Crysfel Villa

                                                                                                        Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                                                                                                        Descarga Código Fuente Ver Demostración

                                                                                                        Regístrate a este curso

                                                                                                        Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                                                                                                        Tendrás acceso a descargar los videos, códigos y material adicional.

                                                                                                        Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                                                                                                        Llevarás un registro de tu avance.