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

Filtrar lectura de archivo php en formato json usando ajax

Estas en el tema de Filtrar lectura de archivo php en formato json usando ajax en el foro de Frameworks JS en Foros del Web. Hola a todos, Despues de encontrar la solución de mi anterior post (Renderizar un grid a la región center de viewPort) necesito conseguir que al ...
  #1 (permalink)  
Antiguo 01/04/2015, 10:16
 
Fecha de Ingreso: enero-2009
Mensajes: 172
Antigüedad: 8 años, 8 meses
Puntos: 1
Filtrar lectura de archivo php en formato json usando ajax

Hola a todos,

Despues de encontrar la solución de mi anterior post (Renderizar un grid a la región center de viewPort) necesito conseguir que al seleccionar un nodo en mi treepanel se carguen en el grid solo los registros que coincidan con el pais y división político administrativa seleccionada, ahora se cargan todos los registros sin importar la selección que haga en el treepanel.

Gracias por la ayuda que me puedan dar.

Creo el dataStore para el treePanel:

Código Javascript:
Ver original
  1. var store = Ext.create('Ext.data.TreeStore', {
  2. proxy: {
  3. type: 'ajax',
  4. url: 'divisions.json'
  5. },
  6. root: {
  7. text: 'Países/Divisiones Político-Administrativas',
  8. expanded: true
  9. }
  10. });

Creo el panel donde renderizaré el grid:

Código Javascript:
Ver original
  1. var MyPanel_01 = Ext.create('Ext.panel.Panel', {
  2.  
  3.             itemId: 'PanelEnRegCenter',
  4.             xtype:'panel',
  5.             region: 'east',
  6.             width: '60%',
  7.             height: 200,
  8.             style: 'margin: 2px',
  9. });

Creo el treePanel

Código Javascript:
Ver original
  1. var MyTree_01 = Ext.create('Ext.tree.Panel', {
  2.                 title:"Mi Treepanel",
  3.                 itemId: 'My_TreePanel_01',
  4.                 region: 'center',
  5.                 width: '40%',
  6.                 height: 200,
  7.                 store: store,
  8.                 style: 'margin: 2px',
  9.                 border:3,
  10.  
  11.                                     listeners:{ //Listeners para cada nodo del treePanel
  12.  
  13.                                        
  14.                                         select:function(t,record)
  15.                                                 {
  16.                                                     var a = '';
  17.                                                     var b = '';
  18.  
  19.                                                     var a = record.parentNode.raw.name; // capturo el nodo pais
  20.                                                     var b = record.raw.name; // capturo el nodo para DivPolAdministrativa
  21. "a" vale  :', a);
  22.                                                         console.log('y "b" vale :', b);
  23.  
  24.                                                     if (a == "Brasil"){ // Prueba para ver si funciona la captura de pais
  25.  
  26.                                                         console.log('La variable "a" almacena  : ', a); // Funciona bien
  27.                                                         console.log('La variable "b" almacena  : ', b); // Funciona bien   
  28.  
  29.                                                     //*****************************************************
  30.                                                         function renderTopic(value, p, record) {
  31.                                                             return Ext.String.format(
  32.                                                                 '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>', // esto lo cambiaré después
  33.                                                                // console.log(value),
  34.                                                                 value,
  35.                                                                 record.data.Etiqueta,
  36.                                                                 record.getId(),
  37.                                                                 record.data.Pais
  38.                                                             );
  39.                                                         }
  40.  
  41.  
  42.                                                         var grid = Ext.create('Ext.grid.Panel', {
  43.                                                             itemIndex: 'MyGridPanel',
  44.                                                             width: '100%',
  45.                                                             xtype:'grid',
  46.                                                             region:'center',
  47.                                                             height: 200,
  48.                                                             store: store_Tabs,
  49.                                                             loadMask: true,
  50.  
  51.                                                             selModel: {
  52.                                                                 pruneRemoved: false
  53.                                                             },
  54.                                                             multiSelect: true,
  55.                                                             viewConfig: {
  56.                                                                 trackOver: false,
  57.                                                                 emptyText: '<h1 style="margin:20px">No matching results</h1>'
  58.                                                             },
  59.  
  60.                                                             // grid columns
  61.                                                             columns:[{
  62.                                                                 xtype: 'rownumberer',
  63.                                                                 width: 50,
  64.                                                                 sortable: false
  65.                                                            },
  66.  
  67.  
  68.                                                            {
  69.                                                                 text: "Archivos",
  70.                                                                 dataIndex: 'Etiqueta',
  71.                                                                 flex: 1,
  72.                                                                 renderer: renderTopic, // función que me permite asignar un link para descarga del(los) archivo(s)
  73.                                                                 sortable: true
  74.                                                             },{
  75.                                                                 text: "DivPola",
  76.                                                                 dataIndex: 'DivPola',
  77.                                                                 flex: 1,
  78.                                                                 sortable: true
  79.  
  80. }                                                           ],
  81.                                                                
  82.                                                         });
  83.                                                                                 } else {
  84.  
  85.                                                                                      MyPanel_01.items.each(function(c){c.close();})
  86.                                                                                      console.log('Se seleccionó un pais distinto');
  87.                                                                                    
  88.                                                                     }  // Termina el IF
  89.                                                                                
  90.                                                                                 MyPanel_01.items.each(function(c){c.close();})
  91.  
  92.                                                                                 MyPanel_01.add(grid);
  93.  
  94.                                                                 } // Termina la función Select del listeners
  95.  
  96.                                     }, // Termina el listeners
  97.  
  98.  
  99. });

Creo el container viewPort

Código Javascript:
Ver original
  1. var border = Ext.create('Ext.container.Viewport', {
  2.     layout: 'border',
  3.     defaults:{
  4.        columnWidth:0.5,
  5.        layout:'anchor',
  6.        border: 0
  7.     },
  8.  
  9.             items: [{
  10.                 region: 'north',
  11.                 height: '16%',
  12.                 layout:'fit',
  13.                border: 0,
  14.                 html: '<iframe style="height: 100%; width: 100%; border: 0" frameborder="0" src="BcoDatosIndig_ESP.htm"></iframe>'
  15.  
  16.  
  17.             },{
  18.                 region: 'south',
  19.                 height: '42%',
  20.                border:0
  21.                                            
  22.                
  23.             },{
  24.                 region: 'west',
  25.                 width: '30%',
  26.                 layout: 'fit'
  27.             },{
  28.                 region: 'east',
  29.                 width: '30%',
  30.                 layout: 'fit'
  31.  
  32.             },{
  33.                 title: 'Migración interna de pueblos indígenas',
  34.                 itemID: 'CenterCnt',
  35.                 region: 'center',
  36.                 width: 400,
  37.                 height: 200,
  38.                 border:1,
  39.                 layout: 'hbox',
  40.  
  41.                         items:[MyTree_01, MyPanel_01] // Cierra Items para Región Center
  42.  
  43.             }
  44.  
  45.         ] // Cierra los Items del ViewPort
  46.  
  47.     }); // Cierra la variable border

El modelo para los datos que mostraré en el grid

Código Javascript:
Ver original
  1. Ext.define('MigrInterna', {
  2.         extend: 'Ext.data.Model',
  3.         fields: [
  4.                   {name:'Pais', type: 'string'},
  5.                   {name:'DivPola', type: 'string'},
  6.                   {name:'Archivo',  type: 'string'},
  7.                   {name:'Etiqueta',  type: 'string'}
  8.  
  9.                 ],
  10.     });

El dataStore para el grid

Código Javascript:
Ver original
  1. // create the Data Store
  2.     var store_Tabs = Ext.create('Ext.data.Store', {
  3.         storeId: 'MigrIntStore',
  4.         model: 'MigrInterna',
  5.         remoteGroup: true,
  6.         // allow the grid to interact with the paging scroller by buffering
  7.         buffered: true,
  8.         leadingBufferZone: 300,
  9.         pageSize: 100,
  10.  
  11.         // *****************************
  12.  
  13.         // Puedo condicionar que el php me devuelva solo los registros
  14.         // en que los campos "Pais" y "DivPola" sean iguales a lo que capturo con "a" y "b"
  15.         // según la selección en el treePanel? ... Aqui es donde necesito ayuda!!
  16.         proxy: {
  17.             type: 'ajax',
  18.             url: 'SeleccionDeArchivos.php',
  19.             reader: {
  20.                 type: 'json',
  21.                 root: 'MigrInt'
  22.             },
  23.         // *****************************
  24.  
  25.  
  26.             // sends single sort as multi parameter
  27.             simpleSortMode: true,
  28.             // sends single group as multi parameter
  29.             simpleGroupMode: true,
  30.  
  31.             // This particular service cannot sort on more than one field, so grouping === sorting.
  32.             groupParam: 'sort',
  33.             groupDirectionParam: 'dir'
  34.         },
  35.         sorters: [{
  36.             property: 'title',
  37.             direction: 'ASC'
  38.         }],
  39.         autoLoad: true,
  40.         listeners: {
  41.  
  42.             // This particular service cannot sort on more than one field, so if grouped, disable sorting
  43.             groupchange: function(store, groupers) {
  44.                 var sortable = !store_Tabs.isGrouped(),
  45.                     headers = grid.headerCt.getVisibleGridColumns(),
  46.                     i, len = headers.length;
  47.                
  48.                 for (i = 0; i < len; i++) {
  49.                     headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
  50.                 }
  51.             },
  52.  
  53.             // This particular service cannot sort on more than one field, so if grouped, disable sorting
  54.             beforeprefetch: function(store, operation) {
  55.                 if (operation.groupers && operation.groupers.length) {
  56.                     delete operation.sorters;
  57.                 }
  58.             }
  59.         }
  60.     });

Etiquetas: ajax, filtrar, formato, funcion, grid, js, json, lectura, php, renderizar
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




La zona horaria es GMT -6. Ahora son las 04:31.