tutorial extjs

TUTORIAL EXTJS

¿Que es un panel, para que sirve y cómo se crean?
Apr 29, 2009 | Español | By Crysfel | 44 Comments | Read in English
El panel es un componente básico dentro del Framework de ExtJS ya que muchos componentes heredan de éste, es por eso que conocer su funcionamiento es fundamental.
¿Qué es un panel?
Un panel es un contenedor con funcionalidades específicas que nos permitenconstruir 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:
view plaincopy to clipboardprint?1. var main = new Ext.Panel({  
2.     title: 'My first panel', //el título del panel  
3.     width:250, //la anchura del panel  
4.     height:300, //la altura que tendrá  
5.    renderTo: 'frame', //el elemento donde será insertado  
6.     html: 'Nothing important just dummy text' //el contenido del panel  
7. });  
El código anterior crea un panel con el título de “My first panel”, condimensiones 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 unpanel
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 elsiguiente ejemplo se muestra otra alternativa por si necesitamos “renderizar” el panel en algún otro momento.
view plaincopy to clipboardprint?
1. var main = new Ext.Panel({  
2.    title: 'My first panel',  
3.     width:250,  
4.     height:300,  
5.     html: 'Nothing important just dummy text'  
6. });  
7. //usamos el método “render” para imprimir el panel en la pantalla  
8....