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

Tabs anidados en extjs 4.2.1

 Estas en el tema de Tabs anidados en extjs 4.2.1 en el foro de Frameworks JS en Foros del Web. Hola amigos(as), buenas tardes, He estado trabajando en una aplicación que funciona como repositorio de archivos ( http://celade.cepal.org/bdcelade/imila/ ) y permite, básicamente el despliegue de ...
  #1 (permalink)  
Antiguo 24/06/2016, 15:28
 
Fecha de Ingreso: enero-2009
Mensajes: 173
Antigüedad: 15 años, 10 meses
Puntos: 1
Tabs anidados en extjs 4.2.1
Hola amigos(as), buenas tardes,

He estado trabajando en una aplicación que funciona como repositorio de archivos (http://celade.cepal.org/bdcelade/imila/ ) y permite, básicamente el despliegue de tabulados asociados a indicadores de migración internacional. Cada indicador tiene su respectivo tabulado de datos que se despliega y presenta en un tabpanel para cada indicador seleccionado de una lista que presento en un gridpanel.

Ahora, cada indicador tiene, además de los datos que ya presento, un gráfico y un mapa asociado a los datos en el tabulado pero existentes en archivos separados, de manera que cada indicador posee tres archivos asociados (uno para los datos, otro para el gr[afico y otro para el mapa) Mi problema es que no he conseguido construir Tabs anidados de manera que cuando se despliege el tabulado de datos, lleve consigo dos tabs adicionales entre los que el usuario pueda alternar para revisar, descargar o enviar por correo.

Adjunto la porción de código que se encarga de mostrar los tabulados según lo que el usuario haya seleccionado en el grid con la lista de indicadores. Ojalá me puedan ayudar a construir los tabs anidados.

Código Javascript: 
Ver original
  1. // se instancia un Panel para el primer indicador seleccionado en el grid (su indexNumber es == 0)
  2.         console.log("Se instancia un panel en var main... linea 466");
  3.         var main = new Ext.Panel({
  4.           
  5.               title: miArray[0],
  6.               itemID: "PanelOut",
  7.               id:'0',
  8.               autoLoad:{url:rows[0],scripts:true},
  9.               maximized: true,
  10.                 iconCls: 'app-icon',
  11.                      tbar:[
  12.                             {iconCls:'save-icon',id:'SaveIcon_0'},
  13.                             {iconCls:'send-icon',id:'SendIcon_0'},
  14.                             {iconCls:'home-icon',id:'HomeIcon_0'}
  15.                         ],
  16.                         closable: true,
  17.                         border: false,
  18.                         autoScroll:true,
  19.               height: '50%', 
  20.         });
  21.  
  22.  
  23.             // Aquí se configura el contenido de cada tabPanel
  24.             var tabs = new Ext.tab.Panel({
  25.                 border: false,
  26.                 activeTab: 0, // El primer tab seleccionado -aunque haya sólo uno- será el activo (con index cero)
  27.                 itemId:'sebas_tabsMain',
  28.                 autoScroll:true,    
  29.                                                      
  30.                          items:[main], //Agrego el tab según el indicador que se quiere revisar (su index es == 0)
  31.  
  32.                                         
  33.                         layoutOnTabChange: true, 
  34.                         deferredRender: false, 
  35.                                 
  36.                         // Maneja el comportamiento de los iconos/funcionalidades para 
  37.                         //descarga individuasl, envío de correo y vuelta atrás de los tabuklados despu{es del primero
  38.                 listeners: {
  39.                                 
  40.                      // cuando se produce el evento de cambiar el tab (cambiar de un tabulado a otro)...
  41.                              tabchange: function(tabPanel, newTab, oldTab, eOpts)  {
  42.                                                                             
  43.                                                 TbpSecond=tabs.getActiveTab();
  44.                                     
  45.                                                 var Step01_Link = TbpSecond.autoLoad.url;
  46.                                         
  47.                                                 var Step02_Link = Step01_Link.split('.');
  48.                                         
  49.                                                 var SoloArchivo = Step02_Link[0].split('/');
  50.                                                                                                         
  51.                                                 var CensousRound = SoloArchivo[3];
  52.                                                                                                                                 
  53.                                                 var CountryCarpet = SoloArchivo[4];
  54.                                     
  55.                                                 var LinkForSendFile = "/bdcelade/depualc/Files/ExcelFiles/" + SoloArchivo[4] + ".xls";
  56.                                     
  57.                                                 var LinkForSaveFile = "/bdcelade/depualc/Files/ExcelFiles/" + SoloArchivo[4] + ".xls";
  58.                                                                                         
  59.                                                 var SendEmail=Ext.getCmp('SendIcon' + '_' + TbpSecond.id );
  60.                                             
  61.                                                 var SaveFile=Ext.getCmp('SaveIcon' + '_' + TbpSecond.id );
  62.                                                                                                                 
  63.                                                 var Back_Window = Ext.getCmp('HomeIcon' + '_' + TbpSecond.id  );
  64.                     
  65.                                                 TbFirst.height = alto - 60;
  66.             
  67.                                                 SaveFile.on('click', function(e,t,eOpts){
  68.                                                                                                         
  69.                                                     document.location=LinkForSaveFile;
  70.                                                                                                                             
  71.                                                 });
  72.             
  73.             
  74.                }, // Termina el listener de "var tabs"
  75.             
  76.             });  // Termina "var tabs"
  77.  
  78.  
  79.         // Aquí se reciben los tabs...
  80.         console.log("Alcanzo a llegar acá?");
  81.             var win = Ext.create("Ext.window.Window",{
  82.                         title :'Tabulados para ' + a + '-' + b,
  83.                         width : 100,
  84.                         height: 100 ,
  85.                         loadMask: true,
  86.                         bodyStyle:{"background-color":"white"},
  87.                       layout:'fit',
  88.                     maximized: true,
  89.                     
  90.                       items: tabs // Como "items de win"
  91.              }); // termina la configuración de "var win"
  92.  
  93.  
  94.             win.show(); // Se muestra
  95.  
  96.  
  97.             var alto  = win.getHeight(); 
  98.             var ancho = win.getWidth(); 
  99.  
  100.             // Por cada indicador seleccionado en el grid.Panel...
  101.             for(var i=1;i<numRecords;i++){  // i parte valiendo 1 porque el primer tab (index 0) ya fue construido y cargado
  102.             
  103.                         // Se instancia un nuevo panel
  104.                         var tabseba = new Ext.panel.Panel({
  105.                             title: miArray[i],
  106.                             id:[i],
  107.                             closable: true,
  108.                             iconCls: 'app-icon',
  109.                                 tbar:[
  110.                                         {iconCls:'save-icon',
  111.                                   id:'SaveIcon' + '_' + [i]
  112.                                         },
  113.                     
  114.                                         {iconCls:'send-icon',
  115.                                                 id:'SendIcon' + '_' + [i]
  116.                                         },
  117.                                                           
  118.                                         {iconCls:'home-icon',
  119.                                                 id:'HomeIcon' + '_' + [i]
  120.                                         }                                                                 
  121.                     
  122.                                     ],    
  123.                     
  124.                     
  125.                             autoScroll:true,
  126.                             border: false,
  127.                             autoLoad:{url:rows[i],scripts:true},
  128.                                         height: alto - 60 
  129.                                                                 
  130.                   }); // Termina configuración del panel en "var tabseba"
  131.             
  132.                    tabs.add(tabseba); // que se agrega como tab a la salida final
  #2 (permalink)  
Antiguo 29/06/2016, 00:38
 
Fecha de Ingreso: enero-2009
Mensajes: 173
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: Tabs anidados en extjs 4.2.1
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
  1. // se instancia un Panel para el primer indicador seleccionado en el grid (su indexNumber es == 0)
  2.  
  3. var main = new Ext.Panel({
  4.           title: 'Tabulado',
  5.           itemID: "PanelOut",
  6.           id:'0',
  7.           autoLoad:{url:rows[0],scripts:true},
  8.           maximized: true,
  9.          iconCls: 'app-icon',
  10.         tbar:[
  11.                    {iconCls:'save-icon',id:'SaveIcon_0'},
  12.                    {iconCls:'send-icon',id:'SendIcon_0'},
  13.                    {iconCls:'home-icon',id:'HomeIcon_0'}
  14.         ],
  15.                  closable: true,
  16.                  border: false,
  17.                  autoScroll:true,
  18.                  height: '50%', 
  19.     });
  20.                                                                 
  21.     var mainGraph = new Ext.Panel({
  22.           title: 'Gráfico',
  23.           itemID: "PanelGraph",
  24.           id:'1',
  25.           //autoLoad:{url:rows[0],scripts:true},
  26.           maximized: true,
  27.         iconCls: 'app-icon',
  28.                                                         
  29.  tbar:[
  30.     {iconCls:'save-icon',id:'SaveIcon_0'},
  31.     {iconCls:'send-icon',id:'SendIcon_0'},
  32.     {iconCls:'home-icon',id:'HomeIcon_0'}
  33.        ],
  34.     closable: true,
  35.     border: false,
  36.     autoScroll:true,
  37.           height: '50%',
  38.           html:'Gráfico' 
  39. });
  40.  
  41. var mainMap = new Ext.Panel({
  42.  
  43.           title: 'Mapa',
  44.           itemID: "PanelMap",
  45.           id:'2',
  46.           //autoLoad:{url:rows[0],scripts:true},
  47.           maximized: true,
  48.      iconCls: 'app-icon',
  49. tbar:[
  50.     {iconCls:'save-icon',id:'SaveIcon_0'},
  51.     {iconCls:'send-icon',id:'SendIcon_0'},
  52.     {iconCls:'home-icon',id:'HomeIcon_0'}
  53. ],
  54.     closable: true,
  55.     border: false,
  56.     autoScroll:true,
  57.             height: '50%',
  58.             html:'Mapa' 
  59.     });
  60. var tabs1 = new Ext.TabPanel({
  61. title: miArray[0],  
  62. width:450,
  63. activeTab: 0,
  64. frame:true,
  65. defaults:{autoHeight: true},
  66. items:[main,mainGraph,mainMap]
  67. });
  68.  
  69. // Aquí se configura el contenido de cada tabPanel
  70. var tabs = new Ext.tab.Panel({
  71. border: false,
  72. activeTab: 0, // El primer tab seleccionado -aunque haya sólo uno- será el activo (con index cero)
  73.  
  74. itemId:'sebas_tabsMain',
  75. autoScroll:true,    
  76.  items:[tabs1], //Agrego el tab según el indicador que se quiere revisar (su index es == 0)
  77. layoutOnTabChange: true, 
  78. deferredRender: false, 
  79. listeners: {
  80.            ...
  81.         }
  82. }, // Termina el listener de "var tabs"
  83.  
  84.  });  // Termina "var tabs"
  #3 (permalink)  
Antiguo 29/06/2016, 08:36
 
Fecha de Ingreso: enero-2009
Mensajes: 173
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: Tabs anidados en extjs 4.2.1
Talvez un moderador pueda mover este post al subforo de JS? quiz'a ah'i tenga m'as posibilidad de una respuesta. Gracias.

Etiquetas: anidados, cada, extjs, funcion, 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:22.