Hace un par de semanas he venido posteando un problema para el que aún no he podido encontrar la solución. En el post anterior a este ("Tabs anidados en aplicación web: EXT JS") intenté una descripción más ordenada del problema en que me encuentro y ahora agrego el código de mi último intento... funciona bien cuando selecciono sólo un indicador, pero no lo hace cuando he seleccionado más de uno...
Adjunto enlace a imágenes que grafican lo que sucede al elegir uno (bien) y tres indicadores (mal)
Gracias, y ojalá alguien me pueda ayudar.
Código Javascript
:
Ver originalif (a == "Distribución Territorial"){
var main = new Ext.Panel({
title: 'Tabulado',
width:450,
itemID: "PanelOut",
id:'0',
//autoLoad:{url:rows[0],scripts:true},
autoLoad:{url:rows[0],scripts:true},
maximized: true,
iconCls: 'app-icon',
tbar:[
{iconCls:'save-icon',id:'SaveIcon_0',text:'Descargar',listeners:{click:{element: 'el',fn: function(){functSave()}}}},
{iconCls:'send-icon',id:'SendIcon_0',text:'Compartir',listeners:{click:{element: 'el',fn: function(){functSend()}}}},
{iconCls:'home-icon',id:'HomeIcon_0',text:'Inicio',
listeners:{
click:{element: 'el',fn: function(){
functHome()
}
},
mouseover:{element: 'el',fn: function(){
functMover()
}
}
}
}],
closable: true,
border: false,
autoScroll:true,
height: '50%',
});
var sebas_gif = rows_gif[0].split(".");
var sebas_jpg = rows_jpg[0].split(".");
var gifShow = "'<center><img src=" + rows_gif[0] + " id=graph border=0 width=50%></center>'" ;
var jpgShow = "'<center><img src=" + rows_jpg[0] + " id=map border=0 width=50%></center>'" ;
var mainGraph = new Ext.Panel({
title: 'Gráfico',
layout: 'fit',
width:450,
itemID: "PanelGraph",
id:'1',
html: gifShow,
maximized: true,
iconCls: 'app-icon',
tbar:[
{iconCls:'save-icon',id:'SaveIcon_0',xtype: 'tbspacer'},
{iconCls:'send-icon',id:'SendIcon_0',xtype: 'tbspacer'},
{iconCls:'home-icon',id:'HomeIcon_0',xtype: 'tbspacer'},
],
closable: true,
border: false,
autoScroll:true,
height: '50%',
});
var mainMap = new Ext.Panel({
title: 'Mapa',
width:'50%',
itemID: "PanelMap",
id:'2',
html:jpgShow,
maximized: true,
iconCls: 'app-icon',
tbar:[
{iconCls:'save-icon',id:'SaveIcon_0',xtype: 'tbspacer'},
{iconCls:'send-icon',id:'SendIcon_0',xtype: 'tbspacer'},
{iconCls:'home-icon',id:'HomeIcon_0',xtype: 'tbspacer'},
],
closable: true,
border: false,
autoScroll:true,
height: '50%',
});
tabs1 = new Ext.TabPanel({
title: miArray['0'],
layout: 'fit',
width:450,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[main,mainGraph,mainMap],
});
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:[tabs1], //Agrego el tab según el indicador que se quiere revisar (al ser único o el primero de los seleccionados, su index es == 0)
layout: 'fit',
layoutOnTabChange: true,
deferredRender: false,
// Maneja el comportamiento de los iconos/funcionalidades para
//descarga individual, envío de correo y vuelta atrás de los tabulados después 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();
if (TbpSecond.id >= 1){
var Step01_Link = TbpSecond.autoLoad.url;
}else{
var Step01_Link = TbpSecond.activeTab.autoLoad.url;
}
var Step02_Link = Step01_Link.split('.');
SoloArchivo = Step02_Link[0].split('/');
var CensousRound = SoloArchivo[3];
var CountryCarpet = SoloArchivo[4];
var LinkForSendFile = "/bdcelade/depualc/Archivos/ExcelFiles/" + SoloArchivo[4] + ".xls";
var LinkForSaveFile = "/bdcelade/depualc/Archivos/ExcelFiles/" + SoloArchivo[4] + ".xls";
if (TbpSecond.id >= 1){
var SendEmail=Ext.getCmp('SendIcon' + '_' + TbpSecond.id );
var SaveFile=Ext.getCmp('SaveIcon' + '_' + TbpSecond.id );
var Back_Window = Ext.getCmp('HomeIcon' + '_' + TbpSecond.id );
}else{
var SendEmail=Ext.getCmp('SendIcon' + '_' + TbpSecond.activeTab.id );
var SaveFile=Ext.getCmp('SaveIcon' + '_' + TbpSecond.activeTab.id );
var Back_Window = Ext.getCmp('HomeIcon' + '_' + TbpSecond.activeTab.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...
// Cada tab trae tres tabs anidados:
// Uno para la tabla con datos, uno para gráfico y uno para Mapa
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(); console.log("Se despliega una ventana... linea 879");
var alto = win.getHeight();
var ancho = win.getWidth();
if (numRecords > 1){
// Por cada indicador de orden 2 o superior seleccionado en el grid.Panel...
for(var i=1;i<numRecords;i++){
// Se instancia un nuevo panel
var sectabseba = new Ext.Panel({
title: 'Tabulado',
width:450,
itemID: "sectabseba",
id:'0',
autoLoad:{url:rows[i],scripts:true},
maximized: true,
iconCls: 'app-icon',
tbar:[
{iconCls:'save-icon',id:'SaveIcon_' + [i],text:'Descargar',listeners:{click:{element: 'el',fn: function(){functSave()}}}},
{iconCls:'send-icon',id:'SendIcon_' + [i],text:'Compartir',listeners:{click:{element: 'el',fn: function(){functSend()}}}},
{iconCls:'home-icon',id:'HomeIcon_' + [i],text:'Inicio',listeners:
{
click:{element: 'el',fn: function(){
functHome()
}
},
mouseover:{element: 'el',fn: function(){
functMover()
}
}
}
}],
closable: true,
border: false,
autoScroll:true,
height: '50%',
}); // Termina configuración del panel en "var tabseba"
var sebas_gif = rows_gif[i].split(".");
var sebas_jpg = rows_jpg[i].split(".");
var gifShow = "'<center><img src=" + rows_gif[i] + " id=graph border=0 width=50%></center>'" ;
var jpgShow = "'<center><img src=" + rows_jpg[i] + " id=map border=0 width=50%></center>'" ;
var secgraphseba = new Ext.Panel({
title: 'Gráfico',
layout: 'fit',
width:450,
itemID: "secgraphseba",
id:'1',
html: gifShow,
maximized: true,
iconCls: 'app-icon',
tbar:[
{iconCls:'save-icon',id:'SaveIcon_' + [i],xtype: 'tbspacer'},
{iconCls:'send-icon',id:'SendIcon_' + [i],xtype: 'tbspacer'},
{iconCls:'home-icon',id:'HomeIcon_' + [i],xtype: 'tbspacer'},
],
closable: true,
border: false,
autoScroll:true,
height: '50%',
}); // Termina configuración del panel en "var tabseba"
var tabseba = new Ext.tab.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,
items:[sectabseba,secgraphseba],
height: alto - 60
}); // Termina configuración del panel en "var tabseba"
tabs.add(tabseba); // que se agrega como tab a la salida final
} // Termina el for
} // Termina el if para numrecord > 1
} // Hasta Trabajo con 'a == Distribución Territorial'