Results 1 to 4 of 4

Thread: RESTful grid pagination

  1. #1

    Question RESTful grid pagination

    I'm trying to extend this awesome example: http://dev.sencha.com/deploy/dev/exa...l/restful.html to achieve data paging as in this other example: http://dev.sencha.com/deploy/dev/exa...id/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:

    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:

    Code:
    {
        "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" 
            } 
        ]
    }

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    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)?

  3. #3

    Default

    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.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    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.

Similar Threads

  1. Pagination in Grid -- Buffered pagination or Override Paging Toolbar
    By jAson bOurnE in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 18 Oct 2010, 1:51 AM
  2. Restful grid deleting multiple records
    By arboooz in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 24 Aug 2010, 1:33 PM
  3. Grid with RESTful Store
    By benshort in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 25 Feb 2010, 4:59 AM
  4. Dinamic column model with pagination - pagination problem
    By zharack in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 23 Jun 2009, 12:43 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •