Results 1 to 7 of 7

Thread: Pagination not working in ExtJs 4

  1. #1
    Sencha User
    Join Date
    Apr 2014
    Posts
    53

    Default Pagination not working in ExtJs 4

    Hello,

    I am trying to get a list of records from database and display them in my search results grid. But for some reason the pagination is not working. It is displaying all the records in the first page and the pagination tool bar shows Page 0 of 0, with previous and next buttons getting disabled. I know I am missing something in my code and I tried different ways but of no result.
    My code:

    Code:
    this.dockedItems = [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        layout: 'hbox',
        items: [{
            store: myEmailStore,
            displayInfo: true,
            displayMsg: 'Displaying emails {0} - {1} of {2}',
            emptyMsg: "No emails to display"
        }, ]
    
    
    }];
    initComponent: function () {
        var myEmailStore = Ext.create('First.store.Emails', {
            autoDestroy: true
        });
        this.items = [{
            xtype: 'firstgridpanel',
            cls: 'gridList',
            store: emailStore,
            itemId: 'myEmailSearchResultsGrid',
            columns: [{
                header: 'Email ID',
                width: 100,
                dataIndex: 'emailId',
                sortable: true
            }, {
                header: "Subject",
                width: 170,
                dataIndex: 'subject'
            }, {
                header: "Received Date",
                width: 170,
                dataIndex: 'receivedDtFormatted',
                sortable: true
            }, ]
        }];
    
        Ext.define('First.store.Emails', {
            extend: 'Ext.data.Store',
    
    
            requires: ['First.model.Email', 'First.EHelper', 'Ext.data.proxy.Ajax'],
    
    
            model: 'First.model.Email',
            autoLoad: false,
            storeId: 'emails',
            pageSize: 20,
    
    
            proxy: {
                type: 'ajax',
                method: 'POST',
                url: First.EHelper.getBaseUrl() + 'email/queryMymails',
                enablePaging: true,
                reader: {
                    type: 'json',
                    totalProperty: 'total',
                    root: 'data',
                    successProperty: 'success'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'REMOTE EXCEPTION',
                            msg: operation.error,
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });
    On the Server Side, I am setting everything like the pagesize,list, etc in a Jason object and returning. On the server side I am getting all the correct values. Not sure what's happening once I return the Json object.
    Any help/suggestions?..
    Last edited by Gary Schlosberg; 30 Apr 2014 at 3:55 PM. Reason: jsbeautify, code tags

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    What does your JSON look like? Is this ExtJS 4.2.1?

  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Answers
    512

    Default

    It is almost certain that:
    1. your server ignores start and limit parameters sent from Ext and always returns all records
    2. your server does not return total number of records in totalProperty
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  4. #4
    Sencha User
    Join Date
    Apr 2014
    Posts
    53

    Default

    This is Ext JS 4.2.1

    My proxy looks like this.

    Ext.define('First.store.Emails', {
    extend: 'Ext.data.Store',
    requires: ['First.model.Email', 'First.EHelper', 'Ext.data.proxy.Ajax'],

    model: 'First.model.Email',
    autoLoad: false,
    storeId: 'emails',
    pageSize: 20,

    proxy: {
    type: 'ajax',
    method: 'POST',
    url: First.EHelper.getBaseUrl() + 'email/queryMymails',
    enablePaging: true,
    reader: {
    type: 'json',
    totalProperty: 'total',
    root: 'data',
    successProperty: 'success'
    },
    listeners: {
    exception: function (proxy, response, operation) {
    Ext.MessageBox.show({
    title: 'REMOTE EXCEPTION',
    msg: operation.error,
    icon: Ext.MessageBox.ERROR,
    buttons: Ext.Msg.OK
    });
    }
    }
    }
    });
    On the backend, I am getting the values for the totalProperty as 190 and root as 20.
    and success as true.

    So out of the 190 records, 20 records are getting displayed on the first page and that's it. The previous and next buttons are disabled and the page numbers show 0 of 0. Not sure what I am missing..

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Answers
    512

    Default

    Ok, so one thing seems to be fixed. Now, if you would define totalProperty:'total' the resulting json must look like this:
    Code:
    {"success":true, "total":190, "data":[...]}
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  6. #6
    Sencha User
    Join Date
    Apr 2014
    Posts
    53

    Default

    How can I make sure that the resulting json object is in correct format?. Is there a way I can check the json object in the proxy?

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664
    Answers
    512

    Default

    Not in the proxy, the server must deliver a valid json. You can check it manually here: http://jsonviewer.stack.hu
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


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
  •