¿Que es un panel, para que sirve y cómo se crean? Más videos
Comentarios: 50
Likes: 0 Persona
Duración: 22.08 minutos
Dificultad: Intermedio
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.
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.
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.
También podemos utilizar la propiedad “autoLoad”, de esta manera cuando creamos la instancia automáticamente se solicitará el contenido mediante una llamada Ajax.
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:
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”.
Ejemplo básico de un panel
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');
Contenido cargado de un elemento del DOM
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');
Contenido cargado mediante 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.
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
Panel colapsable
//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
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');
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.
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.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.
50Comentarios
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
Gracias!! por el tuto
Ahora que ha salido extjs 3 los tutoriales estarán actualizados para esa versión??
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
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 . . .
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
Muchas gracias, lo hare en el foro . . .
Gran tutorial!
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.
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
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
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
Excelente tutorial, antes ExtJS me parecía de los más loco pero nos has mostrado que es muy poderoso.. gracias
Hola gracias por tu aporte como lo hago correr sin el namespace osea localmente para mi intranet que no tiene acceso a internet
Necesitas descargar la librería de ExtJS y modificar las referencias en el HTML. Saludos
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.
Es un string, debe ir entre comillas simples o dobles. Saludos
Muy bueno el curso, estoy en cero en este tema de ext js , espero que este curso me sirva.
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
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
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.
Tendrías que cambiar el layout, podrías usar "card", "accordion", "fit", usa el que más te convenga.
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!! :)
Que bien!! te recomiendo seguir pendiente del blog, estamos trabajando en escribir más tutoriales y con mayor frecuencia!!
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?
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
Hola. Gracias por las palabras, yo también soy Cristiano y seguidor de Jesús :) Saludos desde España!
SImplente gracias!!!!!!!!!
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
me gusto........
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.
Excelente hermano! Que me ha servido mucho estos tutoriales!
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.
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/
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
Me alegra poder ayudar. Saludos
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
todos son tontos mas que yo
me con fundi al desir
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!!!
recuerda que
gran imformacion me mataria si no encontrava esto es para castellano la raspe jajajajajajjajaja
jajajajajajaj bueno la imformacion
Esta excelente toda esta valiosa informacion que transmites mediante tu blog amigo. Realmente felicidades y animo mis mejores deseos para ti ;)
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.
un panel es una reuniòn entre varias personas sobre un tema especifico
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
me gustaria saber que es un panl??????
en que consisten los paneles
?I Will Promote Your Business In Worldwide To Any Niche ... 1.I search in google after the keyward offered by you in order to find sites