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

Tabs anidados en aplicación web: EXT JS

 Estas en el tema de Tabs anidados en aplicación web: EXT JS en el foro de Frameworks JS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 14/07/2016, 22:02
 
Fecha de Ingreso: enero-2009
Mensajes: 173
Antigüedad: 15 años, 10 meses
Puntos: 1
Tabs anidados en aplicación web: EXT JS
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
  1. // Se ha seleccionado más de un indicador en el grid.Panel...
  2.  
  3.  for(var i=1;i<numRecords;i++){
  4.  
  5.    var tabSecond = new Ext.panel.Panel({
  6.      title: miArray[i - 1],
  7.      id:[i - 1],
  8.      closable: true,
  9.      iconCls: 'app-icon',
  10.       tbar:[
  11.     {iconCls:'save-icon',
  12.         id:'SaveIcon' + '_' + [i]
  13.     },
  14.     {iconCls:'send-icon',
  15.         id:'SendIcon' + '_' + [i]
  16.     },
  17.     {iconCls:'home-icon',
  18.         id:'HomeIcon' + '_' + [i
  19.         }
  20.      ],
  21.            autoScroll:true,
  22.        border: false,
  23.            autoLoad:{url:rows[i],scripts:true},
  24.            height: alto – 60
  25.   }); // Termina configuración del panel en "var tabSecond"
  26.  
  27.            tabs.add(tabSecond); // que se agrega como nuevo tab a la salida final
  28.  
  29. } // 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 original
  1. for(var i=0;i<numRecords;i++){
  2.     
  3.             var test_i = [i]; console.log("[i] me entrega: ", test_i);
  4.  
  5.             //console.log("Se instancia un panel en var main... linea 466");
  6.         var main = new Ext.Panel({
  7.           
  8.               title: 'Tabulado',
  9.               width:450,
  10.               itemID: "PanelOut",
  11.               id:[i],
  12.               autoLoad:{url:rows[i],scripts:true},
  13.               maximized: true,
  14.                 iconCls: 'app-icon',
  15.                          tbar:[
  16.                                 {iconCls:'save-icon',id:'SaveIcon_' + [i],
  17.                                         text:'Descargar',
  18.                                         listeners:{click:{element: 'el',fn: function(){functSave()}}}
  19.                                 },
  20.                                 {iconCls:'send-icon',id:'SendIcon_' + [i],
  21.                                         text:'Compartir',
  22.                                         listeners:{click:{element: 'el',fn: function(){functSend()}}}
  23.                                 },
  24.                                 {iconCls:'home-icon',id:'HomeIcon_' + [i],
  25.                                         text:'Inicio',
  26.                                         listeners:{
  27.                                                 click:{element: 'el',fn: function(){functHome()}},
  28.                                                 mouseover:{element: 'el',fn: function(){functMover()}}}
  29.                             }],
  30.                             closable: true,
  31.                             border: false,
  32.                             autoScroll:true,
  33.                 height: '50%', 
  34.         }); //Termina "var main"
  35.                                 
  36.                     var sebas_gif = rows_gif[i].split(".");
  37.                     var sebas_jpg = rows_jpg[i].split(".");
  38.         
  39.                         var gifShow = "'<center><img src=" + rows_gif[i] + "  id=graph border=0 width=50%></center>'" ;
  40.                         var jpgShow = "'<center><img src=" + rows_jpg[i] + "  id=map border=0 width=50%></center>'" ;
  41.         
  42.         var mainGraph = new Ext.Panel({
  43.           
  44.               title: 'Gráfico',
  45.               layout: 'fit',
  46.               width:450,
  47.               itemID: "PanelGraph",
  48.               id:'1',
  49.               html:  gifShow,
  50.               maximized: true,
  51.                 iconCls: 'app-icon',
  52.                          tbar:[
  53.                                 {iconCls:'save-icon',id:'SaveIcon_' + [i],xtype: 'tbspacer'},
  54.                                 {iconCls:'send-icon',id:'SendIcon_' + [i],xtype: 'tbspacer'},
  55.                                 {iconCls:'home-icon',id:'HomeIcon_' + [i],xtype: 'tbspacer'},
  56.                             ],
  57.                             closable: true,
  58.                             border: false,
  59.                             autoScroll:true,
  60.                 height: '50%',
  61.         });
  62.  
  63.         var mainMap = new Ext.Panel({
  64.                 title: 'Mapa',
  65.               width:'50%',
  66.               itemID: "PanelMap",
  67.               id:'2',
  68.               html:jpgShow,
  69.               maximized: true,
  70.                 iconCls: 'app-icon',
  71.                          tbar:[
  72.                          
  73.                                 {iconCls:'save-icon',id:'SaveIcon_' + [i],xtype: 'tbspacer'},
  74.                                 {iconCls:'send-icon',id:'SendIcon_' + [i],xtype: 'tbspacer'},
  75.                                 {iconCls:'home-icon',id:'HomeIcon_' + [i],xtype: 'tbspacer'},
  76.                             ],
  77.                         closable: true,
  78.                         border: false,
  79.                         autoScroll:true,
  80.               height: '50%',
  81.         });
  82.  
  83.             allTabs = new Ext.tab.Panel({
  84.           title: miArray[i],    
  85.           layout: 'fit',
  86.                 width:450,
  87.                 activeTab: 0,
  88.                 frame:true,
  89.                 defaults:{autoHeight: true},
  90.                 items:[main,mainGraph,mainMap],
  91.             });
  92.             
  93.           tabs = new Ext.tab.Panel({
  94.                 border: false,
  95.                 activeTab:[i], // El primer tab seleccionado -aunque haya sólo uno- será el activo (con index cero)
  96.                 itemId:'sebas_tabsMain',
  97.                 autoScroll:true,    
  98.                                                      
  99.                   items:[allTabs], //Agrego el tab según el indicador que se quiere revisar (su index es == 0)
  100.           
  101.                     layout: 'fit',              
  102.                     layoutOnTabChange: true, 
  103.                     deferredRender: false, 
  104.             
  105.           });  // Termina "var tabs"
  106.                 
  107.     // Aquí se reciben los tabs...
  108.         win = Ext.create("Ext.window.Window",{
  109.                     title :'Tabulados para ' + a + '-' + b,
  110.                     width : 100,
  111.                     height: 100 ,
  112.                     loadMask: true,
  113.                     bodyStyle:{"background-color":"white"},
  114.                     layout:'fit',
  115.                     maximized: true,
  116.                 
  117.                     items: tabs // Como "items de win"
  118.          }); // termina la configuración de "var win"
  119.  
  120.  
  121.         win.show(); //console.log("Se despliega una ventana... linea 879");
  122.  
  123.  
  124.         var alto  = win.getHeight(); 
  125.         var ancho = win.getWidth(); 
  126.  
  127.  
  128.     // Se ha seleccionado más de un indicador en el grid.Panel...
  129.         for(var i=1;i<numRecords;i++){
  130.         
  131.                     // Se instancia un nuevo panel
  132.                     var tabSecond = new Ext.panel.Panel({
  133.                         title: miArray[i],
  134.                         id:[i],
  135.                         closable: true,
  136.                         iconCls: 'app-icon',
  137.                             tbar:[
  138.                                     {iconCls:'save-icon',
  139.                             id:'SaveIcon' + '_' + [i]
  140.                                     },
  141.                 
  142.                                     {iconCls:'send-icon',
  143.                                         id:'SendIcon' + '_' + [i]
  144.                                     },
  145.                                                       
  146.                                     {iconCls:'home-icon',
  147.                                         id:'HomeIcon' + '_' + [i]
  148.                                     }                                                                 
  149.                 
  150.                                 ],    
  151.                 
  152.                 
  153.                         autoScroll:true,
  154.                         border: false,
  155.                         autoLoad:{url:rows[i],scripts:true},
  156.                   height: alto - 60 
  157.                                                             
  158.               }); // Termina configuración del panel en "var tabseba"
  159.         
  160.                     tabs.add(tabSecond); // que se agrega como tab a la salida final
  161.         
  162.         } // Termina el for
  #2 (permalink)  
Antiguo 22/07/2016, 12:19
 
Fecha de Ingreso: enero-2009
Mensajes: 173
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: Tabs anidados en aplicación web: EXT JS
Estimados amigos(as),

He seguido trabajando en la solución de este problema pero hasta el momento no consigo dar con la solución, he buscado en foros, leído e intentado no se cuantas estrategias de solución, pero nada y la verdad es que necesito salir de esto para continuar con mi aprendizaje... este no es un trabajo por el que deba dar cuenta, sibno un desafío personal. Entendiendo que quien me pueda responder no disponga del tiempo suficiente para dedicarse a mi petición es que sin ánimo de ofender a nadie, quiero hacer la propuesta de retribuir con algo de dinero el tiempo que se me ayude a resolver esto. dependiendo, claro está que ello depende del dinero que yo pueda disponer para esto, de manera que si alguién de la comunidad puede hacer esto, le agradecería que se ponga en contacto conmigo para acordar los detalles, de partida el cómo hacerlo para no transgredir las reglas del foro.

Gracias y quedo atento a alguna respuesta.
  #3 (permalink)  
Antiguo 05/01/2017, 13:53
 
Fecha de Ingreso: octubre-2009
Mensajes: 305
Antigüedad: 15 años, 2 meses
Puntos: 29
Respuesta: Tabs anidados en aplicación web: EXT JS
en mi anterior empleo logramos crear estructuras en ExtJS anidadas, podrias anidar un tab dentro de otro, sólo tienes que anidar antes un panel y dentro de éste los tabs por el tablayout

pero lo importante aquí es que la UNICA forma de crearlos y recorrerlos es con recursividad, ya que al fin y al cabo son estructuras de árbol lo que creamos.

Etiquetas: anidados, estructuras, extjs, 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:15.