1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    er.vish@live.in is on a distinguished road

      0  

    Default issue with paging in gridpanal from json.

    Hello,
    I am trying to add paging in my grid view, I am able to show the grid with data from JSON in it and paging tool bar with fine page numbers, but as I run it all the content are populated on very first page instead of paging.

    My store JS
    Code:
    var itemsPerPage = 5; 
    
    Ext.define('AM.store.Users', {
        extend: 'Ext.data.Store',
        model: 'AM.model.User',
        id:'userStoreID',
        pageSize:itemsPerPage,
        autoLoad: {params:{start: 0, limit: itemsPerPage}},
        proxy: {
            type: 'ajax',
            url: 'pagingstore.js',
            api: {
                read: 'data/users.json',
                update: 'data/updateUsers.json'
            },
            reader: {
                type: 'json',
                totalProperty: 'results',
                root: 'contacts',
                successProperty: 'success'
            }
        }
    });
    My Model JS

    Code:
    Ext.define('AM.model.User', {
        extend: 'Ext.data.Model',
        fields: ['Id', 'FirstName', 'LastName'],
    
    });

    MY View js
    Code:
    Ext.define('MyApp.view.MyPanel', {
        extend: 'Ext.panel.Panel',
        alias : 'widget.userContactlistPanel',
        title: 'Contacts List',
            type: 'hbox',
            items: [
                            {
                                xtype: 'gridpanel',
                                height: 174,
                                id: 'contactListGrid',
                                width: 616,
                                autoScroll: true,
                                maintainFlex: true,
                                title: '',
                                store: 'Users',
                                columnLines: true,
                                selType: 'rowmodel',
    
        // do not reset the scrollbar when the view refreshs
        invalidateScrollerOnRefresh: false,
                                
                                columns: [
                                    {
                                        xtype: 'gridcolumn',
                                        dataIndex: 'FirstName',
                                        text: 'FirstName',
                                        flex: 1
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        dataIndex: 'LastName',
                                        text: 'LastName',
                                        flex: 1
                                            
                                    }
                                ],
                                         dockedItems: [
                    {
                        xtype: 'pagingtoolbar',
                        width: 360,
                        displayInfo: true,
                        store: 'Users',
                        dock: 'bottom',
                        pageSize: 5
                    }
                ]}
    
                ]
    })
    MY JSON
    Code:
    {
        "totalSize": 10,
        "success": "true",
        "contacts": [
        {
                "attributes": {
                    "type": "Contact",
                    "url": "/services/data/v25.0/sobjects/Contact/0039000000DOSprAAH"
                },
                "FirstName": "Ednakk",
                "LastName": "Frank",
                "Insurance_Name__c": "AIG Life",
                "Insurance_Id__c": "0039000000DH9A2AAL",
                "Type__c": "ssafvsdv"
            },
            {
                "attributes": {
                    "type": "Contact",
                    "url": "/services/data/v25.0/sobjects/Contact/0039000000DH9A2AAL"
                },
                "FirstName": "Tom",
                "LastName": "Ripley",
                "Insurance_Name__c": null,
                "Insurance_Id__c": null,
                "Type__c": null
            },
            {
                "attributes": {
                    "type": "Contact",
                    "url": "/services/data/v25.0/sobjects/Contact/0039000000DH9A3AAL"
                },
                "FirstName": "Liz",
                "LastName": "D'Cruz",
                "Insurance_Name__c": null,
                "Insurance_Id__c": null,
                "Type__c": null
                    . . . . . . . .
                    . . . . . . . .
            }
    ]
    
    
            },
    OUTPUToutputGrid.PNG image attached.


    Plz share some code if possible I have tried a lot from the ExtJs 4 Doc.

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    er.vish@live.in is on a distinguished road

      0  

    Default use server side paging(get only that much records that you want to show on page)

    I found some code for local storing data in array and showing that in grid but that was not fruitful.
    instead I changed my server side query according

    Code:
    GET http://localhost:8080/account_manager/data/users.json?_dc=someID&start=0&limit=5&page=1
    on change of page the start, limit params are changed automatically.

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,340
    Vote Rating
    490
    scottmartin has a spectacular aura about scottmartin has a spectacular aura about scottmartin has a spectacular aura about

      0  

    Default

    totalProperty: 'results',
    "totalSize": 10,

    These need to match.

    Scott.

Thread Participants: 1

Tags for this Thread