Hola amigos(as),
Tengo una serie de indicadores que se listan en un grid entre los que el usario puede elegir uno, todos o sólo algunos. Cada indicador tiene tres archivos asociados uno para datos, uno para gráfico y uno para mapa. El funcionamiento es el siguiente: si el usuario eligió sólo un indicador…
1. cargo –con autoLoad- la tabla de datos : var main = new Ext.Panel({… }
2. cargo –con html- el gráfico : var mainGraph = new Ext.Panel({…}
3. cargo –con html- el mapa : var mainMap = new Ext.Panel({…}
4. Cargo los tres paneles anteriores en uno solo (en title capturo el nombre del
indicador):
allTabs = new Ext.tab.Panel({…
items:[main,mainGraph,mainMap],
}
5. Cargo el tabpanel “allTabs” en un nuevo tab.panel para mostrar en su title una referencia geográfica o de país al que pertenece(n) el(los) indicador(es) seleccionados.
Este es el tab principal:
tabs = new Ext.tab.Panel({…
items:[ allTabs];
}
6. Muestro todo en una ventana:
win = Ext.create("Ext.window.Window",{
items:[tabs];
)};
win.show();
Esto se ejecuta cuando se ha seleccionado un solo indicador, o solo para el primero en caso de haber dos o más indicadores elegidos.
Para el segundo y otros de orden superior que se haya elegido hago lo siguiente:
Código Javascript
:
Ver original// Se ha seleccionado más de un indicador en el grid.Panel...
for(var i=1;i<numRecords;i++){
var tabSecond = new Ext.panel.Panel({
title: miArray[i - 1],
id:[i - 1],
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 tabSecond"
tabs.add(tabSecond); // que se agrega como nuevo tab a la salida final
} // Termina el for
Esto funciona bien, pero cada nuevo tabulado agregado al tab principal (tab) contiene solo el tabulado y no he podido conseguir repetir, dentro del for, lo que he hecho en el tab.panel que tengo en el punto 4:
allTabs = new Ext.tab.Panel({…
items:[main,mainGraph,mainMap],
}
Ningún intento me ha funcionado, por lo que he venido al foro a pedir su ayuda… de verdad necesito salir de este paso y agradeceré mucho si me ayudan a conseguirlo.
Gracias.
El código más completo:
Código Javascript
:
Ver originalfor(var i=0;i<numRecords;i++){
var test_i = [i]; console.log("[i] me entrega: ", test_i);
//console.log("Se instancia un panel en var main... linea 466");
var main = new Ext.Panel({
title: 'Tabulado',
width:450,
itemID: "PanelOut",
id:[i],
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 "var main"
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 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_' + [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%',
});
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_' + [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%',
});
allTabs = new Ext.tab.Panel({
title: miArray[i],
layout: 'fit',
width:450,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[main,mainGraph,mainMap],
});
tabs = new Ext.tab.Panel({
border: false,
activeTab:[i], // El primer tab seleccionado -aunque haya sólo uno- será el activo (con index cero)
itemId:'sebas_tabsMain',
autoScroll:true,
items:[allTabs], //Agrego el tab según el indicador que se quiere revisar (su index es == 0)
layout: 'fit',
layoutOnTabChange: true,
deferredRender: false,
}); // Termina "var tabs"
// Aquí se reciben los tabs...
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();
// Se ha seleccionado más de un indicador en el grid.Panel...
for(var i=1;i<numRecords;i++){
// Se instancia un nuevo panel
var tabSecond = 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(tabSecond); // que se agrega como tab a la salida final
} // Termina el for