PDA

View Full Version : GridPanel caching basParams?



pferril
24 Feb 2009, 3:49 AM
Hi all, ive only been using EXTJS recently, so i might be a little noobish in some features of it, and im having a bit of a problem using multiple grids that have paging on it.
I have 2 pages: Page A and Page B, in both i have GridPanels (Grid A and B ) the both do remote sort, so i use baseparams to pass on the parameters to the store Procedure, and also, they dont have any field name in common. The problem is that if a visit page A, sort Grid A by 'fooA' and then click on Page B, the grid on Page B tryes to sort Grid B on 'fooA', and that basically breaks my Store Procedure (cause the data sorted in Grid B doesnt have a 'fooA' column). Ive tryed to use the store.load({params:{start:0, limit:16, sort:'fooB', dir:'asc'}}); on Grid B, with no luck. Any ideas?


Tnks for your time

mjlecomte
24 Feb 2009, 5:34 AM
Please see here:
http://extjs.com/learn/Ext_Forum_Help#Proper_Posting

pferril
25 Feb 2009, 5:35 AM
Heres some code. the baseparam 'query' is the one thats being cached. Ive tryed to set a default parameter in load event, so the baseparam would be "initialized" the first time, but with no luck. Any ideas?

Grid A


Ext.onReady(function(){

var datos = new Ext.data.Store({
url: 'CursoGrid.m',
remoteSort:true,
baseParams:{
query: ''
},
reader: new Ext.data.XmlReader({
record: 'CursoPaging/value',
id: 'idCurso',
totalRecords: 'CursoTotalPages/value/total'
},

[
{name: 'nombre', mapping: 'nombre'},
{name: 'referencia', mapping: 'referencia'},
{name: 'hospital', mapping: 'hospital'},
{name: 'fechaIniInscr', mapping: 'fechaIniInscr/date/long'}, {name: 'fechaFinInscr', mapping: 'fechaFinInscr/date/long'},
'idCurso'
])


});

// create the grid


var start_date = new Ext.form.DateField({
store: datos,
format: 'Y-m-d',
minValue: '01/01/70',
paramName:'query'
});

var search_field = new Ext.app.SearchField({
store: datos,
width:130 });


var search_btn = new Ext.Button({
text:'Buscar',
tooltip:'Cursos con Fecha de inicio mayor o igual a la Ingresada',
id:'range_date_btn',
handler:function() {onFecha(start_date.getValue());}

});




var grid = new Ext.grid.GridPanel({
tbar: [
//'Search: ', ' ', search_field,
'Fecha Inicio Curso: ', ' ', start_date,
search_btn, ' '
],





store: datos,
columns: [
{header: "Nombre", renderer: modificar, dataIndex: 'nombre', sortable: true, width: 150},
{header: "Referencia", renderer: modificarReferencia, dataIndex: 'referencia', sortable: true, width: 50},
{header: "Hospital", renderer: modificar, dataIndex: 'hospital', sortable: true, width: 150},
{header: "fechaDesde", dataIndex: 'fechaIniInscr', renderer: modificar, sortable: true, width: 100},
{header: "fechaHasta", renderer: modificar, dataIndex: 'fechaFinInscr', sortable: true, width: 100},
{header: "Eliminar", dataIndex: 'idCurso', renderer: eliminarLink, sortable: true, width: 40}
],
renderTo:'CursoGrid',
//title:'Mis consultas',
autoScroll:true,
width:745,
height:400,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:false,
getRowClass : function(record, rowIndex, p, datos){
}
},

bbar: new Ext.PagingToolbar({
pageSize: 16,
store: datos,
displayInfo: true,
displayMsg: ' viendo {0} - {1} de {2}',
emptyMsg: "No hay nada para mostrar",
items:[
'-', {
pressed: false,
enableToggle:true,
text: 'Crear Nuevo Curso',
cls: '',
toggleHandler: nuevo
}]
})
});
datos.load({params:{start:0, limit:16, sort:'nombre', dir:'asc'}});


});
Grid B


Ext.onReady(function(){

var datos = new Ext.data.Store({
url: 'AgendaGrid.m',
remoteSort:true,
reader: new Ext.data.XmlReader({
record: 'AgendaPaging/value',
id: 'idAgenda',
totalRecords: 'AgendaTotalPages/value/pages'
}, [
{name: 'titulo', mapping: 'titulo'},
{name: 'referencia', mapping: 'referencia'},
{name: 'fecha', mapping: 'fecha/date/long'},
'idAgenda', 'curso', 'idCurso'
])
});

// create the grid
var grid = new Ext.grid.GridPanel({
store: datos,
columns: [
{header: "Titulo", width: 80, renderer: modificar, dataIndex: 'titulo', sortable: true},
{header: "Referencia", width: 50, renderer: referenciaLink, dataIndex: 'referencia', sortable: true},
{header: "Curso", width: 80, renderer: modificar, dataIndex: 'curso', sortable: true},
{header: "fecha", width: 120, renderer: modificar, dataIndex: 'fecha', sortable: true},
{header: "", width: 40, dataIndex: 'idAgenda', renderer: eliminarLink, sortable: true}
],
renderTo:'agendaGrid',
//title:'Mis consultas',
autoScroll:true,
width:745,
height:400,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:false,
getRowClass : function(record, rowIndex, p, datos){
}
},

bbar: new Ext.PagingToolbar({
pageSize: 16,
store: datos,
displayInfo: true,
displayMsg: ' viendo {0} - {1} de {2}',
emptyMsg: "No hay nada para mostrar",
items:[
'-', {
pressed: false,
enableToggle:true,
text: 'Crear Nueva Agenda',
cls: '',
toggleHandler: nuevo
}]
})
});

datos.load({params:{start:0, limit:16}});


});

pferril
26 Feb 2009, 4:12 AM
Im kinda loosing all my hair here.... does anyone has any suggestion?


Tnks again for your time

mjlecomte
26 Feb 2009, 5:48 AM
Your code is not properly indented so it's difficult to read, many helpers won't bother to TRY to read it if it isn't formatted properly, let alone make suggestions.

I see you initially set baseParams, but I don't see where you change the baseParams anywhere.

Have you looked at the Grid FAQs?