Aprendiendo Ext JS 3

¿Que es un panel, para que sirve y cómo se crean? Más videos

Descripción del tema

El panel es un componente básico dentro del Framework de Ext JS ya que muchos componentes heredan de éste, es por eso que conocer su funcionamiento es fundamental.

Material de apoyo

Antes de continuar es necesario descargar el material de apoyo, descomprimirlo y copiar los archivos al servidor Web que instalamos en el primer capitulo de este curso, dentro de la carpeta “curso”, en la cual hemos estado trabajando; vamos a crear una carpeta que se llame “panels” y pegamos el material de apoyo.

¿Qué es un panel?

Un panel es un contenedor con funcionalidades específicas que nos permiten construir perfectamente interfaces de usuario, entre algunas características podemos agregarle barras de herramientas superiores e inferiores, botones en la parte inferior o hacer que pueda colapsarse. Los paneles pueden ser fácilmente asignados a cualquier otro contenedor.

Crear un primer panel

Para crear un panel es muy sencillo, basta con hacer lo siguiente:
var main = new Ext.Panel({
	title: 'My first panel', //el título del panel
	width:250, //la anchura del panel
	height:300, //la altura que tendrá
	renderTo: 'frame', //el elemento donde será insertado
	html: 'Nothing important just dummy text' //el contenido del panel
});
El código anterior crea un panel con el título de “My first panel”, con dimensiones de 250 por 300 píxeles y lo colocará dentro del elemento “frame” que se encuentra en el HTML, el contenido es solamente el texto “Nothing important just dummy text”.
My first panel

Ejemplo básico de un panel

Lo más importante en el código anterior es notar la propiedad “renderTo”, esta propiedad acepta el “id” del nodo en el DOM en el cual será insertado el panel que estamos creando. En el siguiente ejemplo se muestra otra alternativa por si necesitamos “renderizar” el panel en algún otro momento.
var main = new Ext.Panel({
	title: 'My first panel',
	width:250,
	height:300,
	html: 'Nothing important just dummy text'
});
//usamos el método “render” para imprimir el panel en la pantalla
main.render('frame');  
Como se puede observar el objeto “Panel” cuenta con un método capaz de “renderizar” o insertar el HTML necesario para que el usuario pueda mirar el panel en la pantalla, este método se llama “render” y acepta como parámetro el “id” del nodo en el DOM donde será insertado.

El contenido del panel

El contenido de un panel puede ser asignado de cuatro maneras diferentes, hemos visto una de ellas en los códigos anteriores, usando la propiedad “html” se le puede especificar el contenido que se necesite agregar. Una segunda opción es definir mediante la propiedad “contentEl” el “id” del elemento que necesitemos meter al panel, es necesario que este elemento ya se encuentre en el DOM para que pueda ser insertado en el panel, vamos a descomentar el código HTML que viene en el material de apoyo y luego escribimos el siguiente código.
var main = new Ext.Panel({
	title: 'My first panel',
	width:250,
	height:300,
	contentEl: 'content' //usamos un elemento del DOM como contenido
});
main.render('frame'); 
My first panel

Contenido cargado de un elemento del DOM

La tercera opción consiste en realizar una llamada Ajax para solicitar el contenido al servidor e insertar dentro del panel la respuesta obtenida, es importante mencionar que el servidor debe enviar código HTML para que sea “renderizado” correctamente en el navegador.
var main = new Ext.Panel({
	title: 'My first panel',
	width:250,
	height:300
});
main.render('frame'); 
//usando Ajax para insertar el contenido
main.load('panel.php'); 
Ajax call

Contenido cargado mediante Ajax

También podemos utilizar la propiedad “autoLoad”, de esta manera cuando creamos la instancia automáticamente se solicitará el contenido mediante una llamada Ajax.
var main = new Ext.Panel({
	title: 'Mi primer panel',
	width:250,
	height:300,
	autoLoad: 'panel.php' //<--- El contenido será sacado de aquí automáticamente
});
main.render('frame'); 
La cuarta opción es insertar otros componentes de Ext JS, pueden ser Paneles, Tabs o pestañas, árboles, acordeones, formularios, etc. Para hacer esto primero necesitamos crear el componente que necesitemos agregar y después asignárselo mediante la propiedad “items” que es un arreglo de componentes.
//creamos el panel interior
var panel1 = new Ext.Panel({
	title: 'Users',
	html: "The content",
	bodyStyle: 'padding:10px;', //podemos asignarle estilos al div contenedor
	height:200,
	border: false //le podemos quitar el borde al panel
});
	
//el panel principal que contendrá otros paneles dentro de si	
var main = new Ext.Panel({
	title: 'My first panel',
	width:250,
	height:600,
	items: [panel1] //aqui se le asignan componentes que contendrá
});
//se renderizan todos los paneles creados
main.render('frame'); 
En el código anterior se creo un panel y después se insertó dentro de otro, esto es muy común cuando desarrollamos layouts con Ext JS, es importante mencionar que al llamar el método “render” del panel principal, automáticamente “renderiza” todos los componentes que contenga.
Panels

Componentes dentro del un panel

Colapsar los paneles

Una de las características que tiene los paneles es que pueden ser colapsados mediante un botón en la parte superior derecha del panel, para realizarlo simplemente se le asigna “true” a la propiedad “collapsible”.
//creamos el panel interior
var panel1 = new Ext.Panel({
	title: 'Users',
	html: 'The content',
	bodyStyle: 'padding:10px;',
	height:200,
	border: false,
	collapsible: true //mediante esta propiedad el panel se colapsa
});
	
//… no se muestra el resto del código por cuestiones de aprendizaje
Panels

Panel colapsable

También es posible que al dar clic sobre cualquier parte del titulo el panel se colapse, esto lo logramos asignando “true” a la propiedad “titleCollapse” de la siguiente manera:
//creamos el panel interior
var panel1 = new Ext.Panel({
	title: 'Users',
	html: 'The content,
	bodyStyle: 'padding:10px;',
	height:200,
	border: false,
	collapsible: true,
	titleCollapse: true  //ahora se colapsará dando clic sobre el título
});
	
//… no se muestra el resto del código por cuestiones de aprendizaje

Agregar un icono en el título del panel

Es común que alguna vez necesitemos agregar iconos en la barra de título para realizar un buen “look and feel”, para hacerlo solo se necesita definir una clase de CSS la cual pondrá como “background” la imagen que usaremos como icono.
.users{
	background: url(icons/users.png) 0px 0px no-repeat !important;
}
Una vez definida la clase CSS se le debe asignar al panel mediante la propiedad “iconCls” de la siguiente manera:
//creamos el panel interior
var panel1 = new Ext.Panel({
	title: 'Users',
	html: 'The content',
	bodyStyle: 'padding:10px;',
	height:200,
	border: false,
	collapsible: true,
	titleCollapse: true, 
	iconCls: 'users'  //con esto se le agregará el icono deseado
});
	
//... no se muestra el resto del código por cuestiones de aprendizaje
Panels

Panel con ícono personalizado

La propiedad “defaults”

Vamos a crear otros dos paneles exactamente iguales al anterior, solo que le vamos a cambiar el título y el icono que tendrán.
var panel1 = new Ext.Panel({
	title: 'Users',
	iconCls: 'users',
collapsible:true,
	border: false,
	bodyStyle: 'padding:10px;',
	titleCollapse: true,
	height:200
});

var panel2 = new Ext.Panel({
	title: 'Reports',
	iconCls: 'reports',
collapsible:true,
	border: false,
	bodyStyle: 'padding:10px;',
	titleCollapse: true,
	height:200
});

var panel3 = new Ext.Panel({
	title: 'Documents',
	iconCls: 'documents',
collapsible:true,
	border: false,
	bodyStyle: 'padding:10px;',
	titleCollapse: true,
	height:200
});

var main = new Ext.Panel({
	title: 'My first panel',
	width:250,
	height:600,
	items: [panel1,panel2,panel3]
});
main.render('frame');	
Si has notado hay mucho código que se repite cuando creamos los primeros tres paneles, exactamente cinco propiedades que no varían en lo absoluto, Ext JS nos permite definir propiedades por defecto para los componentes que utilizan las mismas propiedades, de esta manera evitamos escribir código de más; mediante la propiedad “defaults” podemos definir las propiedades que queramos que sean aplicadas a los componentes que contiene el componente padre.
var panel1 = new Ext.Panel({
	title: 'Users',
	iconCls: 'users'
});
var panel2 = new Ext.Panel({
	title: 'Reports',
	iconCls: 'reports'
});
var panel3 = new Ext.Panel({
	title: 'Documents',
	iconCls: 'documents'
});
		
var main = new Ext.Panel({
	title: 'My first panel',
	width:250,
	height:600,
	defaults: { // con esto evitamos...
		collapsible:true, //duplicar código...
		border: false, // y todas estas...
		bodyStyle: 'padding:10px;', // propiedades ...
		titleCollapse: true, // son agregadas a...
		height:200 //todos los paneles internos
	},
	items: [panel1,panel2,panel3]
});
main.render('frame');
My first panel

Varios panels dentro de un panel principal

Cargar la información

Hemos visto como cargar el contenido de los paneles utilizando Ajax, lo que vamos a realizar en este momento es pasarle parámetros para que nos regrese la información correcta, para esto en el método “load” del panel le pasamos un objeto a la “url”, el método a usar y los parámetros que necesitemos.
panel1.load({
	url: 'panel.php',
	method: 'GET',
	params: {data:'users'}
});
panel2.load({
	url: 'panel.php',
	method: 'GET',
	params: {data:'report'}
});
panel3.load({
	url: 'panel.php',
	method: 'GET',
	params: {data:'documents'}
});
Todas las peticiones son realizadas al mismo archivo de PHP el cual recibe un parámetro y dependiendo de su contenido nos regresa la información adecuada.
My first panel

Producto final

Conclusiones

En este tema vimos como utilizar el Panel, vimos también algunas propiedades y métodos de los más comunes así que te recomiendo mirar el API y jugar un poco con este componente. En el siguiente capitulo voy a mostrar como realizar diferentes layouts para generar diferentes interfaces, por ahora hemos realizado una especie de acordeón muy semejante a la que utiliza el Microsoft Outlook en la parte izquierda. Si tienes algún comentario, sugerencia o duda puedes realizarla utilizando el formulario que se encuentra en la parte inferior de esta página.

48Comentarios

  • 7344c04fee0e5535e239b2a83623041a?s=50&d=identicon Crysfel 29/04/2009

    Ya tengo el video de este tutorial, solo que no se ha terminado de subir al servidor, espero que un rato mas termine de subirse y luego tarda un rato en convertirse, en cuanto este listo actualizo. saludos

    • F90425431ef71f833d1700477ec735c1?s=50&d=identicon pablo 01/05/2009

      Gracias!! por el tuto

      • 174a6eaf98b3828fb3c0b482d84d7e77?s=50&d=identicon pablo 04/05/2009

        Ahora que ha salido extjs 3 los tutoriales estarán actualizados para esa versión??

        • 7344c04fee0e5535e239b2a83623041a?s=50&d=identicon Crysfel 05/05/2009

          Así es. realmente lo que ha cambiado en la versión 3 es que introdujeron el "Ext Core 3" y se le agregaron nuevos componentes, esto significa que migrar de la versión 2 a la versión 3 no habrán problemas ya que la mayoría de los componentes siguen funcionando igual. saludos

          • 1e40402499e7be96f771b24dd16b74fd?s=50&d=identicon Rodolfo 07/05/2009

            Muchas gracias por el material y por el curso, tengo una pregunta que hacerles, no se si sea el sitio correcto pero aqui esta, como puedo mostar informacion que contenga la letra ñ en un grid? ? ?, saludos y gracias por tiempo . . .

            • 7344c04fee0e5535e239b2a83623041a?s=50&d=identicon Crysfel 07/05/2009

              Hola Rodolfo, te invito a que te inscribas en <a href="http://foro.quizzpot.com" rel="nofollow">el foro</a> ahí podemos charlar mejor, sobre lo que preguntas la verdad es que no veo cual es tu problema normalmente no hay nada extraordinario que hacer para mostrar la letra "ñ" o los acentos. Explicame mejor tu problema en el foro. saludos

              • Cf1907dda03222489421dfc75d215aad?s=50&d=identicon Rodolfo 07/05/2009

                Muchas gracias, lo hare en el foro . . .

                • 0794eb13dc22492970730e316afbb088?s=50&d=identicon Juan 08/05/2009

                  Gran tutorial!

                  • 05b0fcd77abfaa6cd13c4bafd43ae4ae?s=50&d=identicon RSAAVEDRA 20/10/2009

                    una consulta, para que estos ejemplos se ejecuten se debe tener librerias extras. digame donde lo puedo conseguis esas librerias extras esas que hace referencia en el programa principal del demo.

                    • 7344c04fee0e5535e239b2a83623041a?s=50&d=identicon Crysfel 20/10/2009

                      hola RSAAVEDRA. Para ejecutar los ejemplos necesitas Ext JS, aqui te dejo un tutorial de instalación: http://www.quizzpot.com/2009/02/instalacion-basica-del-framework/ saludos

                      • 4b033dc45c3b63213a216eb7a4aee3e6?s=50&d=identicon Alma Ochoa 18/01/2010

                        Hola, muy buena tu explicación. Quiero ver si me puedes ayudar con esto, tengo un viewPort y en el center tengo un formPanel, quiero que de acuerdo a la opción seleccionada en un tree que tengo a la izquierda cargue otro formPanel, con el método hide estoy ocultando el primero, pero al querer usar el setvisible en el segundo no se muestra, supongo que es por que no se carga desde un principio. Saludos

                        • 7344c04fee0e5535e239b2a83623041a?s=50&d=identicon Crysfel 19/01/2010

                          Te invito a que pongas tu pregunta en el foro (http://foro.quizzpot.com) pon algo de código para que nos demos una idea de lo que tienes y cual podría ser el error. Saludos

                          • 18e886a3b045c30bf4087b417110e6e1?s=50&d=identicon Juan David 13/02/2010

                            Excelente tutorial, antes ExtJS me parecía de los más loco pero nos has mostrado que es muy poderoso.. gracias

                            • 8b625aeb77da6160c2dbbe7a88ca83ad?s=50&d=identicon seergio 06/05/2010

                              Hola gracias por tu aporte como lo hago correr sin el namespace osea localmente para mi intranet que no tiene acceso a internet

                              • 7344c04fee0e5535e239b2a83623041a?s=50&d=identicon Crysfel 12/05/2010

                                Necesitas descargar la librería de ExtJS y modificar las referencias en el HTML. Saludos

                                • 86903808b04400aa0713c06a31684346?s=50&d=identicon FansClubCrysfel 05/07/2010

                                  Excelente aporte. Una pregunta: ****** main.render('frame'); ******* esta bien pasado ese ID entre apostrofes?, no deberia ir sin apostrofes. En mi ejemplo no me renderiza el panel si paso el id con apostrofes... muchas gracias.

                                  • 7344c04fee0e5535e239b2a83623041a?s=50&d=identicon Crysfel 05/07/2010

                                    Es un string, debe ir entre comillas simples o dobles. Saludos

                                    • C8f514e0622ea0637f49b14dc24483af?s=50&d=identicon vegesoft 15/08/2010

                                      Muy bueno el curso, estoy en cero en este tema de ext js , espero que este curso me sirva.

                                      • 0ed6b4c8cab723afc696a7818fd80519?s=50&d=identicon Merly 05/09/2010

                                        Como siempre muy buenos tutos, tengo una pregunta para que parámetro tengo q añadir para q solo me salga un item o subPanel desplegado y no pueda desplegar todos a la vez. Gracias

                                        • 0ed6b4c8cab723afc696a7818fd80519?s=50&d=identicon Merly 06/09/2010

                                          de verdad muy bueno, quisiera saber q parámetro tengo q agregar para q mis subPanel o items no se desplieguen todas a la vez, si no solo una

                                          • 0ed6b4c8cab723afc696a7818fd80519?s=50&d=identicon Merly 06/09/2010

                                            hola y gracias por todo.Quisiera saber que parametro tengo que añadir al panel para que solo se despliege un subpanel o item y no varios a vez.

                                            • 7344c04fee0e5535e239b2a83623041a?s=50&d=identicon Crysfel 06/09/2010

                                              Tendrías que cambiar el layout, podrías usar "card", "accordion", "fit", usa el que más te convenga.

                                              • 03a76e4cd6e130629574f8dc75ca8e24?s=50&d=identicon Cristian 28/09/2010

                                                Wow! En la empresa donde trabajaba comenzamos a usar Ext-js para un desarrollo profesional dentro del rubro de las telecomunicaciones. La verdad que tiene mucho futuro este FW. Te felicito desde Argentina por el gran esfuerzo y aporte que estás ofreciendo a todos los amantes de Ext-js! En abrazo!! :)

                                                • 7344c04fee0e5535e239b2a83623041a?s=50&d=identicon Crysfel 04/10/2010

                                                  Que bien!! te recomiendo seguir pendiente del blog, estamos trabajando en escribir más tutoriales y con mayor frecuencia!!

                                                  • 3e0cbfc223ec1e1844905c3f4e18fe75?s=50&d=identicon Icarion 01/11/2010

                                                    Hola, Excelente Tutorial, muy explicito, aunque me surge la duda de como referenciar a los objetos una vez que se han colocado dentro de los paneles?

                                                    • Cd3f2494c2fbf12fa4b59c1c3c563e77?s=50&d=identicon Juan 316 26/11/2010

                                                      Gracias Crysfel por toda tu ayuda, y tus comentarios, de veras que es muy importante y ademas colabora, mucho con los que sabemos de solo la definicion de panel, nada. Sabes te invito a conocer del Señor, quiero que sepas que sea cual sea tu situación, o muy buena o muy mala, CRISTO ES TU AMIGO. Y murió por ti en la cruz del calvario, no se si pienses si es el espacio adecuado, pero lo que se, es que El nunca llega en el momento inadecuado. "De tal manera amo Dios al mundo que envió a su Único Hijo para que todo aquel que en El crea no se pierda mas tenga vida eterna" Juan 3.16. entra a una buena pagina desde Colombia www.avivamiento.com

                                                      • 7344c04fee0e5535e239b2a83623041a?s=50&d=identicon Crysfel 26/11/2010

                                                        Hola. Gracias por las palabras, yo también soy Cristiano y seguidor de Jesús :) Saludos desde España!

                                                        • Cb0e5af0db85a5eb208f209a374fcc1a?s=50&d=identicon ext js uevo usuario 27/11/2010

                                                          SImplente gracias!!!!!!!!!

                                                          • F2edcfb68d74525d1b33b4ef3b6da0f3?s=50&d=identicon yolanda diaz 20/01/2011

                                                            te felicito me gusto la faclidad con la que explicas la elaboracion del panel tanto que no me produjo un conflicto al contrario me permite ir desarrollando junto contigo el ejercicio aprendi mucho hoy gracias

                                                            • 91eee62e7ea52d46969c13ae88cb6a9a?s=50&d=identicon gaby 01/04/2011

                                                              me gusto........

                                                              • 5b2a4550f7cf6a531f47ee246647290d?s=50&d=identicon Jo 06/05/2011

                                                                Aprendi muchisimo en mi primer dia con Extjs. Muchas gracias. Esta mañana np le encontraba ni pies ni cabeza pero ya voy avanzando. Sus tutoriales fueron de gran ayuda por que me requirieron que aprendiera esto en el trabajo y no sabia por donde empezar.

                                                                • Daf260a772918dcbceaf746b7c7617a5?s=50&d=identicon luci 05/06/2011

                                                                  Excelente hermano! Que me ha servido mucho estos tutoriales!

                                                                  • A2f815d458d82eef62498b61a3c9a857?s=50&d=identicon Antonio 14/06/2011

                                                                    Ola bueno acabo de interesarme esto. estube probando tus ejemplos Pero me sale al momento de cargar datos con el 'load ' panel.load(); me descargue la version Ext Js 4.2 nose si abra unos cambios.. espero que me ayudes.

                                                                    • Db50d888e86d86416279e44ffa6c89bc?s=50&d=identicon Mlayns 14/09/2011

                                                                      hey amigos, la versión ExtJs4 es bastante distinta a las versiones ExtJs-2.x y ExtJs-3.x... para seguir sin problemas los tutoriales del quizzpot pueden bajar la ultima versión compatible Ext-3.4.0 de esta dirección: http://www.sencha.com/products/extjs3/download/

                                                                      • 93837ba1b0e0d0c02d0ede27c9a606ad?s=50&d=identicon alex somar ed al zurc 15/11/2011

                                                                        te felicito me gusto la faclidad con la que explicas la elaboracion del panel tanto que no me produjo un conflicto al contrario me permite ir desarrollando junto contigo el ejercicio aprendi mucho hoy gracias

                                                                        • D89c4ca47161f46c97199f9eac0f832b?s=50&d=identicon Crysfel 16/11/2011

                                                                          Me alegra poder ayudar. Saludos

                                                                          • B892c8c825d0f35458e2c81254cd4ced?s=50&d=identicon juan carlos 07/03/2012

                                                                            hola tengo una duda que debo hacer para que mis ventanas se dibujen bien trabajo con un tree solo la primer ventana q aparece sale bien y al seleccionar otro nodo, no se dibujan bien los botones y si tengo un combobox no sale completo, que sentenciatengo q utilizar para que se realice bien

                                                                            • 17abef233fc26b24ea97658298eb4536?s=50&d=identicon tontin 01/06/2012

                                                                              todos son tontos mas que yo

                                                                              • 17abef233fc26b24ea97658298eb4536?s=50&d=identicon tontin 01/06/2012

                                                                                me con fundi al desir

                                                                                • 0e28d8ef427e93039dac43ff0221a4fb?s=50&d=identicon Roberto 24/09/2012

                                                                                  Muchísimas gracias, de mucha ayuda los tutoriales y los videos, tengo la misma duda de uno de los amigos que comentan, yo he bajado la version de ExtJs 4.02, y con ella he seguido al pie de la letra el tutorial, pero cuando se trata de llamar la función panel1.load('panel.php') que recupera la información, me da un error que dice TypeError: panel1.load is not a function. Entiendo que este manual fue hecho para versiones anteriores de EXt Js, pero quisiera saber con la nueva versión como se invoca esta función. Gracias nuevamente!!!

                                                                                  • 820330386de0e21dc5c0e52c2df907de?s=50&d=identicon SARA 28/09/2012

                                                                                    HOLA HGHJGHGHJGFFJGHTUG

                                                                                    • 7b339442b2b75b92d5bb3283a1741940?s=50&d=identicon laura valentina 28/09/2012

                                                                                      recuerda que

                                                                                      • 49bad41177d4a510880da5d6a665037b?s=50&d=identicon irene peña 17/02/2013

                                                                                        gran imformacion me mataria si no encontrava esto es para castellano la raspe jajajajajajjajaja

                                                                                        • 49bad41177d4a510880da5d6a665037b?s=50&d=identicon irene peña 17/02/2013

                                                                                          jajajajajajaj bueno la imformacion

                                                                                          • 3c55d7d67774592f67b92a3c9f48dd19?s=50&d=identicon Juan Ramon 08/07/2013

                                                                                            Esta excelente toda esta valiosa informacion que transmites mediante tu blog amigo. Realmente felicidades y animo mis mejores deseos para ti ;)

                                                                                            • 195981eda3acb63a9944453b59931a66?s=50&d=identicon Felipe 31/08/2013

                                                                                              Para la version 4. Es load, se vuelve loader. y queda así: Ext.create('Ext.Component', { loader: { url: 'content.html', autoLoad: true }, renderTo: Ext.getBody() }); Todo lo demás sigue igual.

                                                                                              • B24ef7580b52f1bc1c2f96a1aeb8d939?s=50&d=identicon anonmus 23/04/2014

                                                                                                un panel es una reuniòn entre varias personas sobre un tema especifico

                                                                                                • D89c4ca47161f46c97199f9eac0f832b?s=50&d=identicon Crysfel Villa 24/04/2014

                                                                                                  La definición de panel dependería del contexto en que se esté mencionando, por lo tanto tu definición es incorrecta en este artículo xD

                                                                                                Instructor del curso

                                                                                                Crysfel Villa

                                                                                                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