PDA

View Full Version : Problem loading data to a Paging Grid



adrianmatteo
18 Oct 2010, 6:10 AM
Hi, I'm new to Sencha and I started doing a Pagind Grid that takes data from an external url and uses a JsonStore to read the data.

I was following the example thats on the examples page, and I managed to load the data correctly, but the paging feature its not working.

I build the data url by adding GET variables to the php url according to the fields specified in the search page I made.

The thing is I don't know how de JsonStore.load({params:{start:0, limit:50}}) functions does, I read on the api that it passes those params as standard HTTP parameters, but I don't know how to acces them, I tried $_GET['start'], but it didn't work.

Here's my js code.

I would really thank your help!


Ext.onReady(function(){
if(document.getElementById("isSet").value != "-"){

var get = "?isSet=1";
if(document.getElementById('author')!="")
get = get +'&author='+document.getElementById('author').value
if(document.getElementById('title')!="")
get = get +'&title='+document.getElementById('title').value
if(document.getElementById('year')!="")
get = get +'&year='+document.getElementById('year').value
if(document.getElementById('reference')!="")
get = get +'&reference='+document.getElementById('reference').value
if(document.getElementById('keywords')!="")
get = get +'&keywords='+document.getElementById('keywords').value
// create the Data Store
var store = new Ext.data.JsonStore({
root: 'thesis',
totalProperty: 'totalCount',
idProperty: 'thesisId',

fields: [
'code', 'title', 'name', 'lastname',
{name: 'year', type: 'int'},
'college', 'type',{name: 'views', type: 'int'}
],


proxy: new Ext.data.HttpProxy({
url: 'http://192.168.151.37/thesis/consultaAvanzadaJSON.php?'+get

})
});
store.setDefaultSort('year', 'desc');


// pluggable renders
function renderLink(value, p, record){
return String.format(
'<b><a href="../../tesis.php?id={0}">Descargar</a></b>',
value);

}
function renderAuthor(value, p, record){
return String.format(
'{0} {1}',
value, record.data.lastname);
}

var grid = new Ext.grid.GridPanel({
width:1000,
height:600,
title:'Consulta de Trabajos de Tesis',
store: store,
trackMouseOver:false,
disableSelection:true,
loadMask: true,

// grid columns
columns:[{
id: 'code', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Cota",
dataIndex: 'code',
width: 80,
sortable: true
},{
header: "Titulo",
dataIndex: 'title',
width: 300,
sortable: true
},{
header: "Autor",
dataIndex: 'name',
width: 200,
renderer: renderAuthor,
sortable: true
},{
id: 'year',
header: "A&ntilde;o",
dataIndex: 'year',
width: 50,
sortable: true
},{
header: "Escuela",
dataIndex: 'college',
width: 150,
sortable: true
},{
header: "Tipo",
dataIndex: 'type',
width: 70,
sortable: true
},{
header: "Vistas",
dataIndex: 'views',
width: 50,
sortable: true
},{
header: "Link",
dataIndex: 'code',
width: 100,
renderer: renderLink,
sortable: false
}],

// customize view config
viewConfig: {
forceFit:false,
enableRowBody:true
},

// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 50,
store: store,
displayInfo: true,
displayMsg: 'Mostrando Trabajos {0} - {1} de {2}',
emptyMsg: "No hay trabajos de tesis para mostrar",
items:[
'-']
})
});

// render it
grid.render('topic-grid');

// trigger the data store load
store.load({params:{start:0, limit:50}});

}

});

plalx
18 Oct 2010, 6:33 AM
By default, they will be POST parameters, not GET parameters.

Condor
18 Oct 2010, 6:33 AM
Wrong method!

1. Specify method:'GET' in your HttpProxy config.
2. Store your filter parameters in the store baseParams and not in the url.

adrianmatteo
18 Oct 2010, 11:49 AM
Thx guys, I'm gonna try that!

adrianmatteo
20 Oct 2010, 10:50 AM
I have another issue with that code.

When it loads it sets the right number of pages, theres 99 records and I wanna load 50 records at a time and it says that there are 2 pages wich is correct, but it only gives me 18 or 16 records instead of the 50 records I want.

plalx
20 Oct 2010, 11:25 AM
So youre saying that the paging toolbar prints 1 - 50 of 99 but only shows 1 - 18 ?

Try
store.on('load', function() { console.log(this.getCount()); }); to see how many records are getting loaded...

*Note: Do you have any duplicated records? Records with the same properties (even the key/id)?

adrianmatteo
20 Oct 2010, 11:51 AM
So youre saying that the paging toolbar prints 1 - 50 of 99 but only shows 1 - 18 ?

Try
store.on('load', function() { console.log(this.getCount()); }); to see how many records are getting loaded...

*Note: Do you have any duplicated records? Records with the same properties (even the key/id)?


The paging toolbar prints "Page 1 of 2 Showing 1-18 of 99"

plalx
20 Oct 2010, 3:35 PM
Well, are you sure that the server is returning 50 records?