PDA

View Full Version : RESTful grid pagination



fabio.bozzo
30 Dec 2010, 6:03 AM
I'm trying to extend this awesome example: http://dev.sencha.com/deploy/dev/examples/restful/restful.html to achieve data paging as in this other example: http://dev.sencha.com/deploy/dev/examples/grid/paging.html .

It does not page my data: the pagingToolbar correctly calculate page and works ok, but all data is showing together in the grid, no paging at all! What am I doing wrong? Help me please :((

Here's my code:



<script type="text/javascript">
var App = new Ext.App({});

var proxy = new Ext.data.HttpProxy({
//url: '/services/products'
url: '/test_json.cfm'
});

var reader = new Ext.data.JsonReader({
totalProperty: 'TOTAL',
successProperty: 'SUCCESS',
idProperty: 'BARCODE_INTERNO',
root: 'DATA',
messageProperty: 'MESSAGE'
}, [
{name: 'BARCODE_INTERNO'},
{name: 'ARTCOD', allowBlank: false},
{name: 'ARTDES', allowBlank: false},
{name: 'ARTPRZVEND', allowBlank: false}
]);


var writer = new Ext.data.JsonWriter({
encode: false // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
});


var store = new Ext.data.Store({
id: 'user',
restful: true, // <-- This Store is RESTful
proxy: proxy,
reader: reader,
writer: writer // <-- plug a DataWriter into the store just as you would a Reader
});

Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
App.setAlert(App.STATUS_NOTICE, "Before " + action);
});

Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
App.setAlert(true, action + ':' + res.message);
});

Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
App.setAlert(false, "Errore: " + action);
});


var userColumns = [
{header: "Codice a barre", width: 100, sortable: true, dataIndex: 'BARCODE_INTERNO'},
{header: "Codice articolo", width: 100, sortable: true, dataIndex: 'ARTCOD', editor: new Ext.form.TextField({})},
{header: "Descrizione", width: 100, sortable: true, dataIndex: 'ARTDES', editor: new Ext.form.TextField({})},
{header: "Prezzo di vendita", width: 100, sortable: true, dataIndex: 'ARTPRZVEND', editor: new Ext.form.TextField({})}
];


Ext.onReady(function() {
Ext.QuickTips.init();

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Conferma'
});

var theGrid = new Ext.grid.GridPanel({
renderTo: 'gridArea',
iconCls: 'icon-grid',
frame: true,
title: 'Articoli',
loadMask: true,
height: 480,
width: 640,
store: store,
plugins: [editor],
columns : userColumns,
tbar: [{
text: 'Inserisci',
iconCls: 'silk-add',
handler: onAdd
}, '-', {
text: 'Elimina',
iconCls: 'silk-delete',
handler: onDelete
}, '-'],
viewConfig: { forceFit: true },
bbar: new Ext.PagingToolbar({
pageSize: 2,
store: store,
emptyMsg: "Nessun articolo presente",
displayInfo: true
})
});

store.load({params:{start:0,limit:2}});

function onAdd(btn, ev) {
var u = new theGrid.store.recordType({
ARTCOD : '',
ARTDES : '',
ARTPRZVEND : ''
});
editor.stopEditing();
theGrid.store.insert(0, u);
editor.startEditing(0);
}

function onDelete() {
var rec = theGrid.getSelectionModel().getSelected();
if (!rec) return false;
theGrid.store.remove(rec);
}
});

</script>



For now, test_json.cfm returns valid Json like that (static, and no matter field names, that's not my problem), imagine 50 records like that:



{
"SUCCESS": true,
"TOTAL": 10,
"MESSAGE": "Dati prelevati correttamente.",
"DATA": [
{
"ARTQTAORDC": 0.000,
"ARTGESTLIS": "",
"ARTTPCOD": "",
"ARTRIC1": 0.00,
"ARTPRZPUB": 0.0,
"ARTRIC2": 0.00,
"ARTQTACONF": 0.000,
"ARTFOR": "",
"ARTAGGSCA": 0.000,
"ARTUM": "NR",
"ARTQTAINI": 0.000,
"ARTGR": "",
"ARTGRLN2": "",
"ARTCODBAR": 8.8590944706E11,
"ARTAGGCAR": 0.000,
"ARTQTARES": 0.000,
"ARTQTACAR": 0.000,
"ARTPESO": 0.00,
"ARTCODIVA": 20.0,
"ARTGESTMAG": "",
"ARTNOTE2": "",
"ARTDES": "xx",
"ARTETICH": "",
"ARTVALCAR": 0.000,
"ARTDES2": "",
"ARTVALSCA": 0.000,
"ARTQTAPRS": 0.000,
"ARTQTASCA": 0.000,
"ARTDTINV": "",
"ARTARROT": 0,
"ARTAGGACQ": 0.000,
"ARTCODFOR": "",
"ARTCID": 0,
"ARTCODPR": "MC572TY\/A",
"ARTCODBFOR": "",
"ARTGRLN": "",
"ARTQTASCAI": 0.000,
"ARTDESRC": "",
"ARTSTPNOTE": "",
"ARTQTASCAD": 0.000,
"ARTVALINI": 0.000,
"ARTAGGSCAD": 0.000,
"ARTSCACQ1": 0.00,
"ARTAGGSCAI": 0.000,
"ARTSCACQ2": 0.00,
"ARTSCACQ3": 0.00,
"BARCODE_INTERNO": 2.000000145754E12
} ,
{
"ARTQTAORDC": 0.000,
"ARTGESTLIS": "",
"ARTTPCOD": "",
"ARTRIC1": 0.00,
"ARTPRZPUB": 0.0,
"ARTRIC2": 0.00,
"ARTQTACONF": 0.000,
"ARTFOR": "",
"ARTAGGSCA": 0.000,
"ARTUM": "NR",
"ARTQTAINI": 0.000,
"ARTGR": "",
"ARTGRLN2": "",
"ARTCODBAR": 8.8590944706E11,
"ARTAGGCAR": 0.000,
"ARTQTARES": 0.000,
"ARTQTACAR": 0.000,
"ARTPESO": 0.00,
"ARTCODIVA": 20.0,
"ARTGESTMAG": "",
"ARTNOTE2": "",
"ARTDES": "xx",
"ARTETICH": "",
"ARTVALCAR": 0.000,
"ARTDES2": "",
"ARTVALSCA": 0.000,
"ARTQTAPRS": 0.000,
"ARTQTASCA": 0.000,
"ARTDTINV": "",
"ARTARROT": 0,
"ARTAGGACQ": 0.000,
"ARTCODFOR": "",
"ARTCID": 0,
"ARTCODPR": "MC572TY\/A",
"ARTCODBFOR": "",
"ARTGRLN": "",
"ARTQTASCAI": 0.000,
"ARTDESRC": "",
"ARTSTPNOTE": "",
"ARTQTASCAD": 0.000,
"ARTVALINI": 0.000,
"ARTAGGSCAD": 0.000,
"ARTSCACQ1": 0.00,
"ARTAGGSCAI": 0.000,
"ARTSCACQ2": 0.00,
"ARTSCACQ3": 0.00,
"BARCODE_INTERNO": 2.000000145754E12,
"ARTVALSCAD": 0.000,
"ARTBRANDID": 1,
"ARTSCMIN": 0.000,
"ARTNOTE": "",
"ARTDTAGG": "dicembre, 16 2010 00:00:00"
}
]
}

Condor
30 Dec 2010, 6:15 AM
Does your server actually process the start and limit parameters and only return that single page?

ps. Or did you want local paging (see PagingStore user extension)?

fabio.bozzo
30 Dec 2010, 6:19 AM
Thank you for the super fast answer.
You simply come where I want to.

No, I don't want local pagination. My table has up to 14.000 very large records, so I NEED to use start and limit to do a query LIMIT #limit# OFFSET #start# (I'm using ColdFusion + Rest Services for my backend).

I'll try to process those parameters and tell you how is gone.
Thanks a lot.

Condor
30 Dec 2010, 6:37 AM
Are you SURE your server is correctly retrieving the start and limit parameters from the request?

ps. Remember that you do the initial store load with params (= HTTP params) and not jsonData.