Continuando solo... al menos consigo algo, no tan bueno pero algo al fin:
Conseguí anidar tres panels y desplegarlos en un tab como en la imagen:
https://www.dropbox.com/s/w3h9428c7q...ulado.PNG?dl=0
El primero despliega un tabulado; el Segundo, un gráfico y el tercero, un mapa. Cada uno tiene la misma barra de herramientas con tres íconos: uno pra descarga, otro para envío de correo y el ultimo para volver al grid principal... un problema, ahora es que en el panel para tabulado los íconos están bien, mientras que en el de gráfico y en el de mapa se repite el ultimo, mostrando el ícono para volver, el de correo y otra vez el de volver (
https://www.dropbox.com/s/i7pm4xodr9...afico.JPG?dl=0)... no consigo descubrir porqué sucede, si me ayudan lo agradeceré.
El código:
Código Javascript
:
Ver original// se instancia un Panel para el primer indicador seleccionado en el grid (su indexNumber es == 0)
var main = new Ext.Panel({
title: 'Tabulado',
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%',
});
var mainGraph = new Ext.Panel({
title: 'Gráfico',
itemID: "PanelGraph",
id:'1',
//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%',
html:'Gráfico'
});
var mainMap = new Ext.Panel({
title: 'Mapa',
itemID: "PanelMap",
id:'2',
//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%',
html:'Mapa'
});
var tabs1 = new Ext.TabPanel({
title: miArray[0],
width:450,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[main,mainGraph,mainMap]
});
// 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:[tabs1], //Agrego el tab según el indicador que se quiere revisar (su index es == 0)
layoutOnTabChange: true,
deferredRender: false,
listeners: {
...
}
}, // Termina el listener de "var tabs"
}); // Termina "var tabs"