Filtrar lectura de archivo php en formato json usando ajax

[sesebas]

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:

var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'divisions.json'
},
root: {
text: 'Países/Divisiones Político-Administrativas',
expanded: true
}
});
 

Creo el panel donde renderizaré el grid:

Código Javascript:

var MyPanel_01 = Ext.create('Ext.panel.Panel', {
 
            itemId: 'PanelEnRegCenter',
            xtype:'panel',
            region: 'east',
            width: '60%',
            height: 200,
            style: 'margin: 2px',
});
 

Creo el treePanel

Código Javascript:

var MyTree_01 = Ext.create('Ext.tree.Panel', {
                title:"Mi Treepanel",
                itemId: 'My_TreePanel_01',
                region: 'center',
                width: '40%',
                height: 200,
                store: store,
                style: 'margin: 2px',
                border:3,
 
                                    listeners:{ //Listeners para cada nodo del treePanel
 
                                        
                                        select:function(t,record)
                                                {
                                                    var a = '';
                                                    var b = '';
 
                                                    var a = record.parentNode.raw.name; // capturo el nodo pais
                                                    var b = record.raw.name; // capturo el nodo para DivPolAdministrativa
"a" vale  :', a);
                                                        console.log('y "b" vale :', b);
 
                                                    if (a == "Brasil"){ // Prueba para ver si funciona la captura de pais
 
                                                        console.log('La variable "a" almacena  : ', a); // Funciona bien
                                                        console.log('La variable "b" almacena  : ', b); // Funciona bien    
 
                                                    //*****************************************************
                                                        function renderTopic(value, p, record) {
                                                            return Ext.String.format(
                                                                '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>', // esto lo cambiaré después
                                                               // console.log(value),
                                                                value,
                                                                record.data.Etiqueta,
                                                                record.getId(),
                                                                record.data.Pais
                                                            );
                                                        }
 
 
                                                        var grid = Ext.create('Ext.grid.Panel', {
                                                            itemIndex: 'MyGridPanel',
                                                            width: '100%',
                                                            xtype:'grid',
                                                            region:'center',
                                                            height: 200,
                                                            store: store_Tabs,
                                                            loadMask: true,
 
                                                            selModel: {
                                                                pruneRemoved: false
                                                            },
                                                            multiSelect: true,
                                                            viewConfig: {
                                                                trackOver: false,
                                                                emptyText: '<h1 style="margin:20px">No matching results</h1>'
                                                            },
 
                                                            // grid columns
                                                            columns:[{
                                                                xtype: 'rownumberer',
                                                                width: 50,
                                                                sortable: false
                                                           },
 
 
                                                           {
                                                                text: "Archivos",
                                                                dataIndex: 'Etiqueta',
                                                                flex: 1,
                                                                renderer: renderTopic, // función que me permite asignar un link para descarga del(los) archivo(s)
                                                                sortable: true
                                                            },{
                                                                text: "DivPola",
                                                                dataIndex: 'DivPola',
                                                                flex: 1,
                                                                sortable: true
 
}                                                           ],
                                                                
                                                        });
                                                                                } else {
 
                                                                                     MyPanel_01.items.each(function(c){c.close();})
                                                                                     console.log('Se seleccionó un pais distinto');
                                                                                    
                                                                    }  // Termina el IF
                                                                                
                                                                                MyPanel_01.items.each(function(c){c.close();})
 
                                                                                MyPanel_01.add(grid);
 
                                                                } // Termina la función Select del listeners
 
                                    }, // Termina el listeners
 
 
});
 

Creo el container viewPort

Código Javascript:

var border = Ext.create('Ext.container.Viewport', {
    layout: 'border',
    defaults:{
       columnWidth:0.5,
       layout:'anchor',
       border: 0
    },
 
            items: [{
                region: 'north',
                height: '16%',
                layout:'fit',
               border: 0,
                html: '<iframe style="height: 100%; width: 100%; border: 0" frameborder="0" src="BcoDatosIndig_ESP.htm"></iframe>'
 
 
            },{
                region: 'south',
                height: '42%',
               border:0
                                            
                
            },{
                region: 'west',
                width: '30%',
                layout: 'fit'
            },{
                region: 'east',
                width: '30%',
                layout: 'fit'
 
            },{
                title: 'Migración interna de pueblos indígenas',
                itemID: 'CenterCnt',
                region: 'center',
                width: 400,
                height: 200,
                border:1,
                layout: 'hbox',
 
                        items:[MyTree_01, MyPanel_01] // Cierra Items para Región Center
 
            }
 
        ] // Cierra los Items del ViewPort
 
    }); // Cierra la variable border
 

El modelo para los datos que mostraré en el grid

Código Javascript:

Ext.define('MigrInterna', {
        extend: 'Ext.data.Model',
        fields: [
                  {name:'Pais', type: 'string'},
                  {name:'DivPola', type: 'string'},
                  {name:'Archivo',  type: 'string'},
                  {name:'Etiqueta',  type: 'string'}
 
                ],
    });
 

El dataStore para el grid

Código Javascript:

// create the Data Store
    var store_Tabs = Ext.create('Ext.data.Store', {
        storeId: 'MigrIntStore',
        model: 'MigrInterna',
        remoteGroup: true,
        // allow the grid to interact with the paging scroller by buffering
        buffered: true,
        leadingBufferZone: 300,
        pageSize: 100,
 
        // *****************************
 
        // Puedo condicionar que el php me devuelva solo los registros
        // en que los campos "Pais" y "DivPola" sean iguales a lo que capturo con "a" y "b"
        // según la selección en el treePanel? ... Aqui es donde necesito ayuda!!
        proxy: {
            type: 'ajax',
            url: 'SeleccionDeArchivos.php',
            reader: {
                type: 'json',
                root: 'MigrInt'
            },
        // *****************************
 
 
            // sends single sort as multi parameter
            simpleSortMode: true,
            // sends single group as multi parameter
            simpleGroupMode: true,
 
            // This particular service cannot sort on more than one field, so grouping === sorting.
            groupParam: 'sort',
            groupDirectionParam: 'dir'
        },
        sorters: [{
            property: 'title',
            direction: 'ASC'
        }],
        autoLoad: true,
        listeners: {
 
            // This particular service cannot sort on more than one field, so if grouped, disable sorting
            groupchange: function(store, groupers) {
                var sortable = !store_Tabs.isGrouped(),
                    headers = grid.headerCt.getVisibleGridColumns(),
                    i, len = headers.length;
                
                for (i = 0; i < len; i++) {
                    headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
                }
            },
 
            // This particular service cannot sort on more than one field, so if grouped, disable sorting
            beforeprefetch: function(store, operation) {
                if (operation.groupers && operation.groupers.length) {
                    delete operation.sorters;
                }
            }
        }
    });