Pestañas (Ext.TabPanel)
Como la mayoría de los contenedores, Ext.Tabpanel deriva de Ext.Panel, con lo que hereda todas sus funcionalidades básicas. Realmente se comporta como un panel en el que el contenido se puede dividir en varios tabs, donde cada uno de ellos es un panel con su correspondiente layout
Ventanas
También Ext.Window deriva de Ext.Panel, y como cualquier contenedor puede contener otros elementos de ExtJS: sólo tienen que incluirse en el bloque ‘items’. En el ejemplo vemos cómo incluir dentro de una ventana un Ext.Tabpanel.
Además aprovechamos para ver que en el bloque items no es obligatorio definir los componentes que queremos introducir, sino que se pueden incluir los nombres de los objetos definidos aparte. De esta forma, cuando tenemos muchos componentes encadenados se mejora la legibilidad del código, aunque, hay que tener cuidado de que los objetos que añadimos estén definidos en el ámbito (scope) de nuestro objeto.
Ext.onReady(function () {
var backendViewport = new Ext.Panel({
layout: 'fit',
width: 625,
height: 448,
border: false,
items: [{
xtype: 'tabpanel', // En vez de instanciar directamente el objeto, utilizamos la notación del xtype
height: 450,
bodyStyle: 'padding:10px',
activeTab: 0,
enableTabScroll:true,
plain: true,
items: [{
xtype: 'panel',
title: 'Tab #1',
layout: 'fit',
items: [{
/*
* Panel con layout 'column'
*/
xtype: 'panel',
layout:'column',
items: [{
title: 'Col 1',
columnWidth: .333
},{
title: 'Col 2',
columnWidth: .333
},{
title: 'Col 3',
columnWidth: .333
}]
}]
},{
xtype: 'panel',
title: 'Tab #2',
layout: 'form',
width: 300,
minWidth: 300,
autoScroll: true,
split: true,
items: [{
xtype: 'hidden',
id: 'gal_id_hidden',
name: 'gal_id'
},{
xtype: 'textfield',
name: 'gal_cat_id',
anchor: '90%',
fieldLabel: 'Categoría'
},{
xtype: 'textfield',
name: 'gal_weight',
anchor: '90%',
fieldLabel: 'Peso Galería'
},{
xtype: 'datefield',
name: 'gal_date',
anchor: '90%',
fieldLabel: 'Fecha Alta'
},{
xtype: 'textfield',
name: 'gal_relative_path',
anchor: '90%',
fieldLabel: 'Directorio'
},{
xtype: 'textfield',
name: 'gal_pho_id',
anchor: '90%',
fieldLabel: 'Imágen representativa'
}
]
},
{
xtype: 'panel',
title: 'Tab #3',
layout: 'accordion',
layoutConfig: {
titleCollapse: false,
animate: false,
activeOnTop: false
},
items: [{
title: 'Subpanel 1',
html: 'Contenido subpanel 1'
},{
title: 'Subpanel 2',
html: 'Contenido subpanel 2'
},{
title: 'Subpanel 3',
html: 'Contenido subpanel 3'
}]
}]
}
]
});
var windowExample = new Ext.Window({
closable: true,
resizable: true,
modal: false,
border: true,
plain: true,
closeAction: 'hide',
title: 'Ventana con paneles',
width: 640,
height: 480,
renderTo: 'divRender',
/*
* Aprovechamos para ver otro tipo de asignación de items,
* en vez de definirlos en el bloque 'items' lo asignamos
* desde una variable
*/
items: [backendViewport]
});
windowExample.show();
});
me parece muy buena la idea de estos pequennos ejemplos de Ext por que realmente para quienes estamos comenzando es bien complejo.
quizas tambien puedas ayudarme con lo siguiente:
Quisiera saber como crear una nueva pestanna cuando se de click en el nodo de un arbol y ponerle a esta el texto del nodo….
Gracias
muy buena tu pagina, necesito tu ayuda, ¿Como puedo meter dentro de una de estas ventanas o en un tab una pagina externa, como por ejemplo la pagina de google?
Hola soy estudiante informatico y estoy desarrollando un proyecto donde uso Ext Js 2.2 y symfony 1.2.8, estoy pasando trabajo y he tratado de todas las formas posibles de cargar los datos en un grid de extjs pidiendole los datos a una funcion de symfony; pero no lo logro. Si alguien me pudiera dar una sugerencia se lo agradecería.
S@lu2s, Migue.