Results 1 to 8 of 8

Thread: Problem loading data to a Paging Grid

  1. #1

    Exclamation Problem loading data to a Paging Grid

    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!

    Code:
    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}});
    
        }
    
    });

  2. #2
    Sencha User
    Join Date
    Aug 2009
    Posts
    480

    Default

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

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

    Default

    Wrong method!

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

  4. #4

    Default

    Thx guys, I'm gonna try that!

  5. #5

    Default

    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.

  6. #6
    Sencha User
    Join Date
    Aug 2009
    Posts
    480

    Default

    So youre saying that the paging toolbar prints 1 - 50 of 99 but only shows 1 - 18 ?

    Try
    Code:
    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)?

  7. #7

    Default

    Quote Originally Posted by scarsick View Post
    So youre saying that the paging toolbar prints 1 - 50 of 99 but only shows 1 - 18 ?

    Try
    Code:
    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"

  8. #8
    Sencha User
    Join Date
    Aug 2009
    Posts
    480

    Default

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

Similar Threads

  1. Data not loading into paging grid in GXT
    By venu in forum Ext GWT: Help & Discussion (1.x)
    Replies: 3
    Last Post: 19 Apr 2009, 7:35 PM
  2. Grid paging/data loading issue
    By anazimok in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 1 Oct 2008, 9:40 AM
  3. Paging grid not loading data...
    By yade in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 4 Aug 2008, 10:44 PM
  4. Java + JsonData + grid + paging + data loading
    By diuxa in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 14 Feb 2008, 8:36 AM
  5. remote loading json data for a paging grid
    By jbowman in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 12 Nov 2006, 6:37 PM

Posting Permissions

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