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 originalvar store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'divisions.json'
},
root: {
text: 'Países/Divisiones Político-Administrativas',
expanded: true
}
});
Código Javascript
:
Ver originalvar MyPanel_01 = Ext.create('Ext.panel.Panel', {
itemId: 'PanelEnRegCenter',
xtype:'panel',
region: 'east',
width: '60%',
height: 200,
style: 'margin: 2px',
});
Código Javascript
:
Ver originalvar 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
});
Código Javascript
:
Ver originalvar 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
Código Javascript
:
Ver originalExt.define('MigrInterna', {
extend: 'Ext.data.Model',
fields: [
{name:'Pais', type: 'string'},
{name:'DivPola', type: 'string'},
{name:'Archivo', type: 'string'},
{name:'Etiqueta', type: 'string'}
],
});
Código Javascript
:
Ver original// 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;
}
}
}
});