Hola amigos(as), buenas tardes,
He estado trabajando en una aplicación que funciona como repositorio de archivos (
http://celade.cepal.org/bdcelade/imila/ ) y permite, básicamente el despliegue de tabulados asociados a indicadores de migración internacional. Cada indicador tiene su respectivo tabulado de datos que se despliega y presenta en un tabpanel para cada indicador seleccionado de una lista que presento en un gridpanel.
Ahora, cada indicador tiene, además de los datos que ya presento, un gráfico y un mapa asociado a los datos en el tabulado pero existentes en archivos separados, de manera que cada indicador posee tres archivos asociados (uno para los datos, otro para el gr[afico y otro para el mapa) Mi problema es que no he conseguido construir Tabs anidados de manera que cuando se despliege el tabulado de datos, lleve consigo dos tabs adicionales entre los que el usuario pueda alternar para revisar, descargar o enviar por correo.
Adjunto la porción de código que se encarga de mostrar los tabulados según lo que el usuario haya seleccionado en el grid con la lista de indicadores. Ojalá me puedan ayudar a construir los tabs anidados.
Código Javascript
:
Ver original// se instancia un Panel para el primer indicador seleccionado en el grid (su indexNumber es == 0)
console.log("Se instancia un panel en var main... linea 466");
var main = new Ext.Panel({
title: miArray[0],
itemID: "PanelOut",
id:'0',
autoLoad:{url:rows[0],scripts:true},
maximized: true,
iconCls: 'app-icon',
tbar:[
{iconCls:'save-icon',id:'SaveIcon_0'},
{iconCls:'send-icon',id:'SendIcon_0'},
{iconCls:'home-icon',id:'HomeIcon_0'}
],
closable: true,
border: false,
autoScroll:true,
height: '50%',
});
// Aquí se configura el contenido de cada tabPanel
var tabs = new Ext.tab.Panel({
border: false,
activeTab: 0, // El primer tab seleccionado -aunque haya sólo uno- será el activo (con index cero)
itemId:'sebas_tabsMain',
autoScroll:true,
items:[main], //Agrego el tab según el indicador que se quiere revisar (su index es == 0)
layoutOnTabChange: true,
deferredRender: false,
// Maneja el comportamiento de los iconos/funcionalidades para
//descarga individuasl, envío de correo y vuelta atrás de los tabuklados despu{es del primero
listeners: {
// cuando se produce el evento de cambiar el tab (cambiar de un tabulado a otro)...
tabchange: function(tabPanel, newTab, oldTab, eOpts) {
TbpSecond=tabs.getActiveTab();
var Step01_Link = TbpSecond.autoLoad.url;
var Step02_Link = Step01_Link.split('.');
var SoloArchivo = Step02_Link[0].split('/');
var CensousRound = SoloArchivo[3];
var CountryCarpet = SoloArchivo[4];
var LinkForSendFile = "/bdcelade/depualc/Files/ExcelFiles/" + SoloArchivo[4] + ".xls";
var LinkForSaveFile = "/bdcelade/depualc/Files/ExcelFiles/" + SoloArchivo[4] + ".xls";
var SendEmail=Ext.getCmp('SendIcon' + '_' + TbpSecond.id );
var SaveFile=Ext.getCmp('SaveIcon' + '_' + TbpSecond.id );
var Back_Window = Ext.getCmp('HomeIcon' + '_' + TbpSecond.id );
TbFirst.height = alto - 60;
SaveFile.on('click', function(e,t,eOpts){
document.location=LinkForSaveFile;
});
}, // Termina el listener de "var tabs"
}); // Termina "var tabs"
// Aquí se reciben los tabs...
console.log("Alcanzo a llegar acá?");
var win = Ext.create("Ext.window.Window",{
title :'Tabulados para ' + a + '-' + b,
width : 100,
height: 100 ,
loadMask: true,
bodyStyle:{"background-color":"white"},
layout:'fit',
maximized: true,
items: tabs // Como "items de win"
}); // termina la configuración de "var win"
win.show(); // Se muestra
var alto = win.getHeight();
var ancho = win.getWidth();
// Por cada indicador seleccionado en el grid.Panel...
for(var i=1;i<numRecords;i++){ // i parte valiendo 1 porque el primer tab (index 0) ya fue construido y cargado
// Se instancia un nuevo panel
var tabseba = new Ext.panel.Panel({
title: miArray[i],
id:[i],
closable: true,
iconCls: 'app-icon',
tbar:[
{iconCls:'save-icon',
id:'SaveIcon' + '_' + [i]
},
{iconCls:'send-icon',
id:'SendIcon' + '_' + [i]
},
{iconCls:'home-icon',
id:'HomeIcon' + '_' + [i]
}
],
autoScroll:true,
border: false,
autoLoad:{url:rows[i],scripts:true},
height: alto - 60
}); // Termina configuración del panel en "var tabseba"
tabs.add(tabseba); // que se agrega como tab a la salida final