Ir para conteúdo


Foto

Tabs anidados

Estruturas de decisión tabs anidados

  • Por favor, faça o login para responder
Não há respostas para este tópico

#1 sesebas

sesebas

    Iniciante

  • Membros
  • Pip
  • 9 posts

Postado 15 July 2016 - 01:28

Me encuentro desarrollando una aplicación a modo de auto-aprendizaje en el uso de EXT JS. Estoy usando la versión 4.2.1 y luego me daré a la tarea de migrarla a la versión 6. Ahora me he encontrado con una dificultad en la versión 4.2.1 que no he podido resolver, a pesar que le he dedicado mucho tiempo y esfuerzo buscando en foros de EXT JS e intentando muchas opciones que no me han resultado.

 

La situación es la siguiente: 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({… }


  1. cargo –con html- el gráfico : var mainGraph = new Ext.Panel({…}

  2. 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],

}


  1. 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];

}


  1. Muestro todo en una ventana:


win = Ext.create("Ext.window.Window",{

                items:[tabs];

)};


  •  


A continuación lo que 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:

// 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) contine 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.

for(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






0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos