Problem loading data to a Paging Grid

[adrianmatteo]

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]

By default, they will be POST parameters, not GET parameters.

[Condor]

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]

Thx guys, I'm gonna try that!

[adrianmatteo]

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]

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]

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]

Well, are you sure that the server is returning 50 records?