Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problemas con Carga dinámica de tabs anidados

 Estas en el tema de Problemas con Carga dinámica de tabs anidados en el foro de Frameworks JS en Foros del Web. Estimados(as), 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 ...
  #1 (permalink)  
Antiguo 25/07/2016, 10:04
 
Fecha de Ingreso: enero-2009
Mensajes: 173
Antigüedad: 15 años, 10 meses
Puntos: 1
Problemas con Carga dinámica de tabs anidados
Estimados(as),

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)

https://www.dropbox.com/sh/0b92b5g18...NDhbCiACa?dl=0

Gracias, y ojalá alguien me pueda ayudar.

Código Javascript: 
Ver original
  1. if (a == "Distribución Territorial"){
  2.     
  3.   var main = new Ext.Panel({
  4.       
  5.   title: 'Tabulado',
  6.   width:450,
  7.   itemID: "PanelOut",
  8.   id:'0',
  9.   //autoLoad:{url:rows[0],scripts:true},
  10.   autoLoad:{url:rows[0],scripts:true},
  11.   maximized: true,
  12.     iconCls: 'app-icon',
  13.      tbar:[
  14.             {iconCls:'save-icon',id:'SaveIcon_0',text:'Descargar',listeners:{click:{element: 'el',fn: function(){functSave()}}}},
  15.             {iconCls:'send-icon',id:'SendIcon_0',text:'Compartir',listeners:{click:{element: 'el',fn: function(){functSend()}}}},
  16.             {iconCls:'home-icon',id:'HomeIcon_0',text:'Inicio',
  17.             listeners:{
  18.                     click:{element: 'el',fn: function(){
  19.                                     functHome()
  20.                                 }
  21.                             },
  22.                     mouseover:{element: 'el',fn: function(){
  23.                                     functMover()
  24.                                 }
  25.                             }
  26.                     }
  27.             }],
  28.         closable: true,
  29.         border: false,
  30.         autoScroll:true,
  31.     height: '50%', 
  32.     });
  33.                                         
  34.     var sebas_gif = rows_gif[0].split(".");
  35.     var sebas_jpg = rows_jpg[0].split(".");
  36.     var gifShow = "'<center><img src=" + rows_gif[0] + "  id=graph border=0 width=50%></center>'" ;
  37.     var jpgShow = "'<center><img src=" + rows_jpg[0] + "  id=map border=0 width=50%></center>'" ;
  38.  
  39.     var mainGraph = new Ext.Panel({
  40.                 title: 'Gráfico',
  41.           layout: 'fit',
  42.           width:450,
  43.           itemID: "PanelGraph",
  44.           id:'1',
  45.           html:  gifShow,
  46.           maximized: true,
  47.             iconCls: 'app-icon',
  48.                  tbar:[
  49.                         {iconCls:'save-icon',id:'SaveIcon_0',xtype: 'tbspacer'},
  50.                         {iconCls:'send-icon',id:'SendIcon_0',xtype: 'tbspacer'},
  51.                         {iconCls:'home-icon',id:'HomeIcon_0',xtype: 'tbspacer'},
  52.                     ],
  53.                     closable: true,
  54.                     border: false,
  55.                     autoScroll:true,
  56.             height: '50%',
  57.     });
  58.  
  59.     var mainMap = new Ext.Panel({
  60.       
  61.           title: 'Mapa',
  62.           width:'50%',
  63.           itemID: "PanelMap",
  64.           id:'2',
  65.           html:jpgShow,
  66.           maximized: true,
  67.             iconCls: 'app-icon',
  68.                  tbar:[
  69.                         {iconCls:'save-icon',id:'SaveIcon_0',xtype: 'tbspacer'},
  70.                         {iconCls:'send-icon',id:'SendIcon_0',xtype: 'tbspacer'},
  71.                         {iconCls:'home-icon',id:'HomeIcon_0',xtype: 'tbspacer'},
  72.                     ],
  73.                     closable: true,
  74.                     border: false,
  75.                     autoScroll:true,
  76.             height: '50%',
  77.     });
  78.  
  79.     tabs1 = new Ext.TabPanel({
  80.       title: miArray['0'],  
  81.       layout: 'fit',
  82.         width:450,
  83.         activeTab: 0,
  84.         frame:true,
  85.         defaults:{autoHeight: true},
  86.         items:[main,mainGraph,mainMap],
  87.     });
  88.     
  89. tabs = new Ext.tab.Panel({
  90.         border: false,
  91.         activeTab:'0', // El primer tab seleccionado -aunque haya sólo uno- será el activo (con index cero)
  92.         itemId:'sebas_tabsMain',
  93.         autoScroll:true,    
  94.                                              
  95.           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)
  96.  
  97.             layout: 'fit',              
  98.             layoutOnTabChange: true, 
  99.             deferredRender: false, 
  100.                     
  101.             // Maneja el comportamiento de los iconos/funcionalidades para 
  102.             //descarga individual, envío de correo y vuelta atrás de los tabulados después del primero
  103.         listeners: {
  104.                         
  105.              // cuando se produce el evento de cambiar el tab (cambiar de un tabulado a otro)...
  106.                  tabchange: function(tabPanel, newTab, oldTab, eOpts)  {
  107.                                                                 
  108.                                     TbpSecond=tabs.getActiveTab();
  109.  
  110.                                 if (TbpSecond.id >= 1){
  111.                                             var Step01_Link = TbpSecond.autoLoad.url;
  112.                                 }else{
  113.                                       var Step01_Link = TbpSecond.activeTab.autoLoad.url;
  114.                                 }
  115.                                     var Step02_Link = Step01_Link.split('.');
  116.                                 
  117.                                         SoloArchivo = Step02_Link[0].split('/');
  118.                                                                                             
  119.                                     var CensousRound = SoloArchivo[3];
  120.                                                                                                                     
  121.                                     var CountryCarpet = SoloArchivo[4];
  122.                             
  123.                                     var LinkForSendFile = "/bdcelade/depualc/Archivos/ExcelFiles/" + SoloArchivo[4] + ".xls";
  124.                             
  125.                                     var LinkForSaveFile = "/bdcelade/depualc/Archivos/ExcelFiles/" + SoloArchivo[4] + ".xls";
  126.                                                                             
  127.                                 if (TbpSecond.id >= 1){
  128.  
  129.                                             var SendEmail=Ext.getCmp('SendIcon' + '_' + TbpSecond.id );
  130.                                         
  131.                                             var SaveFile=Ext.getCmp('SaveIcon' + '_' + TbpSecond.id );
  132.                                                                                                             
  133.                                             var Back_Window = Ext.getCmp('HomeIcon' + '_' + TbpSecond.id  );
  134.                                 }else{
  135.                                             var SendEmail=Ext.getCmp('SendIcon' + '_' + TbpSecond.activeTab.id );
  136.                                         
  137.                                             var SaveFile=Ext.getCmp('SaveIcon' + '_' + TbpSecond.activeTab.id );
  138.                                                                                                             
  139.                                             var Back_Window = Ext.getCmp('HomeIcon' + '_' + TbpSecond.activeTab.id  );
  140.                                     }
  141.  
  142.                                     TbFirst.height = alto - 60;
  143.     
  144.                                     SaveFile.on('click', function(e,t,eOpts){
  145.                                                                                             
  146.                                     document.location=LinkForSaveFile;
  147.                                                                                                                 
  148.                                     });
  149.     
  150.     
  151.                         
  152.               },
  153.     
  154.         }, // Termina el listener de "var tabs"
  155.     
  156. });  // Termina "var tabs"
  157.                             
  158.                         
  159.         // Aquí se reciben los tabs...
  160.         // Cada tab trae tres tabs anidados:
  161.         // Uno para la tabla con datos, uno para gráfico y uno para Mapa
  162.             win = Ext.create("Ext.window.Window",{
  163.                         title :'Tabulados para ' + a + '-' + b,
  164.                         width : 100,
  165.                         height: 100 ,
  166.                         loadMask: true,
  167.                         bodyStyle:{"background-color":"white"},
  168.                             layout:'fit',
  169.                             maximized: true,
  170.                     
  171.                             items: tabs // Como "items de win"
  172.              }); // termina la configuración de "var win"
  173.  
  174.  
  175.                 win.show(); console.log("Se despliega una ventana... linea 879");
  176.  
  177.  
  178.                 var alto  = win.getHeight(); 
  179.                 var ancho = win.getWidth(); 
  180.  
  181.  
  182.         if (numRecords > 1){
  183.                 
  184.                 // Por cada indicador de orden 2 o superior seleccionado en el grid.Panel...
  185.                 for(var i=1;i<numRecords;i++){
  186.                 
  187.         // Se instancia un nuevo panel
  188.         var sectabseba = new Ext.Panel({
  189.       title: 'Tabulado',
  190.       width:450,
  191.       itemID: "sectabseba",
  192.       id:'0',
  193.       autoLoad:{url:rows[i],scripts:true},
  194.       maximized: true,
  195.         iconCls: 'app-icon',
  196.              tbar:[
  197.                     {iconCls:'save-icon',id:'SaveIcon_' + [i],text:'Descargar',listeners:{click:{element: 'el',fn: function(){functSave()}}}},
  198.                     {iconCls:'send-icon',id:'SendIcon_' + [i],text:'Compartir',listeners:{click:{element: 'el',fn: function(){functSend()}}}},
  199.                     {iconCls:'home-icon',id:'HomeIcon_' + [i],text:'Inicio',listeners:
  200.                         
  201.                                             {
  202.                                             click:{element: 'el',fn: function(){
  203.                                                                 functHome()
  204.                                                                 }
  205.                                                         },
  206.                                                         
  207.                                             mouseover:{element: 'el',fn: function(){
  208.                                                                 functMover()
  209.                                                                 }
  210.                                                         }
  211.                                             
  212.                                             
  213.                                             }
  214.                                                                                                                                                 
  215.                     }],
  216.                 closable: true,
  217.                 border: false,
  218.                 autoScroll:true,
  219.         height: '50%', 
  220.                                                     
  221.     }); // Termina configuración del panel en "var tabseba"
  222.  
  223.         var sebas_gif = rows_gif[i].split(".");
  224.         var sebas_jpg = rows_jpg[i].split(".");
  225.  
  226.             var gifShow = "'<center><img src=" + rows_gif[i] + "  id=graph border=0 width=50%></center>'" ;
  227.             var jpgShow = "'<center><img src=" + rows_jpg[i] + "  id=map border=0 width=50%></center>'" ;
  228.  
  229.         var secgraphseba = new Ext.Panel({
  230.       title: 'Gráfico',
  231.       layout: 'fit',
  232.       width:450,
  233.       itemID: "secgraphseba",
  234.       id:'1',
  235.       html:  gifShow,
  236.       maximized: true,
  237.         iconCls: 'app-icon',
  238.              tbar:[
  239.                     {iconCls:'save-icon',id:'SaveIcon_' + [i],xtype: 'tbspacer'},
  240.                     {iconCls:'send-icon',id:'SendIcon_' + [i],xtype: 'tbspacer'},
  241.                     {iconCls:'home-icon',id:'HomeIcon_' + [i],xtype: 'tbspacer'},
  242.                 ],
  243.                 closable: true,
  244.                 border: false,
  245.                 autoScroll:true,
  246.         height: '50%',
  247.                                                     
  248.     }); // Termina configuración del panel en "var tabseba"
  249.  
  250.         var tabseba = new Ext.tab.Panel({
  251.             title: miArray[i],
  252.             id:[i],
  253.             closable: true,
  254.             
  255.             iconCls: 'app-icon',
  256.                 tbar:[
  257.                         {iconCls:'save-icon',
  258.                                             id:'SaveIcon' + '_' + [i]
  259.                         },
  260.         
  261.                         {iconCls:'send-icon',
  262.                             id:'SendIcon' + '_' + [i]
  263.                         },
  264.                                           
  265.                         {iconCls:'home-icon',
  266.                             id:'HomeIcon' + '_' + [i]
  267.                         }                                                                 
  268.         
  269.                     ],    
  270.             
  271.         
  272.             autoScroll:true,
  273.             border: false,
  274.             items:[sectabseba,secgraphseba],
  275.           height: alto - 60 
  276.                                                     
  277.     }); // Termina configuración del panel en "var tabseba"
  278.  
  279.         tabs.add(tabseba); // que se agrega como tab a la salida final
  280.  
  281.                 } // Termina el for
  282.  
  283.         } // Termina el if para numrecord > 1
  284.         
  285. } // Hasta Trabajo con 'a == Distribución Territorial'

Imágenes:

Etiquetas: anidados, tabs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:16.