Una ventana flotante Más videos
Comentarios: 54
Likes: 0 Persona
Duración: 12.5 minutos
Dificultad: Intermedio
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.
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.
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 básica
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();
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.
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 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.
Instructor del curso
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.
54Comentarios
El video lo subo mas al rato :D
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
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
Es e agradecer que contestes tan rapido ^^
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
Esa es la idea, mas adelante habrán mas cursos :D saludos
Que increible, rikisima estan esas ventanas
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.
Tendrías que generar ese mensaje fuera del iframe, en el documento padre, recuerda que un iframe es un documento aparte.
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(); });
Gracias por la aportación :D
una asquerosidad de ejemplo el window.js no tiene nada PERROS
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
Buen dia, quisiera saber si se puede quitar el boton "x" de cerrar la ventana. Gracias
Si, solamente necesitas configurarlo de la siguiente manera: "closable: false" saludos
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
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
En la configuración del FormPanel existe una propiedad que se llama "buttons" que recibe un arreglo con los botones que necesites. Saludos
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ó.
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
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
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
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
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 ?
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
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
En verdad no importa si tienen un namespace diferente, la comunicación entre componentes la realizas mediante los eventos que ocurren entre ellos. Saludos
andale esta de lujo esta onda de las ventanas,
hey eh colcoado todo como esta ene l video y a la hora de provar el window.html no carga la ventana :S
Has descargado y cambiado las referencias a la librería de ExtJS adecuadamente? saludos
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.
Saludes no me aparece la parte de arriba de la ventana flotante
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
Si importas el ext-all.js y el ext-base.js no es necesario importar nada más! Saludos
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!
Si es posible, simplemente configura las propiedades adecuadas, te recomiendo darle un vistazo al API, en verdad que no es complicado. Saludos
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!
Deseeo abrir la ventana 1 al darle clic a un enlaze como tendria que hacer? Gracias
Como hago para que aparezca la ventana inicialmente en la parte inferior derecha?
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?
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
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."
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.
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
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
Hola Diego, crea una funcion y mandala llamar con el evento onclick del boton. Saludos
Anunciosero
muy bueno el post, me fue de mucha ayuda, espero sigan haciendo publicaciones. Saludos cordiales y muchas bendiones
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
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
Hola buenos dias. Alguien sabe porque no me aparecen las imagenes de los botones cerrar, maximizar, y minimizar?? Saludos
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.
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'.
necesito que una imagen con botones se minimice y maximice y lo otro con barritas se mueva gracias.