1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    22
    Vote Rating
    0
    roykrish is on a distinguished road

      0  

    Default Unanswered: Extjs4 - Paging not working - Please help !!

    Unanswered: Extjs4 - Paging not working - Please help !!


    Hi,

    I am new to Sencha, and tried to write a sample application using Grid. I followed the example given in 'Getting started guide' and get one simple application up and running using MVC architecture, with one view only which is nothing but a plain Grid. My datastore is a json file.

    Now, I want to use Paging in my grid panel. I followed this link http://docs.sencha.com/ext-js/4-0/#!/guide/grid and did whatever is mentioned here under the 'Paging' Section .

    [1] I used 'pageSize' and 'totalProperty' in my store.

    [2] I modified my json file as mentioned in the example.

    [3] I put the dockedItem section in my view.

    What is happening is that in my Grid View I am getting the paging toolbar. The toolbar shows all the buttons correctly. The only problem is that every time the grid is loading is all the records. I have total 9 records in my static JSON file, and my pageSize is 4. I want the grid to show first 4 records only at the beginning and when I go to page 2 it should show me from 4 to 8 and so on. But it is always showing up all the 9 records.

    Could someone please guide me, that what I am missing here.

    Thank You !!

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,624
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The page size must be enforced on the server. If your server is ignoring the page size and returning 9 results then that is what you will get in your store.

    All paging requests contain 3 request parameters to allow you to implement paging: page, start and limit. There is some redundancy here, you don't need to use all three on the server but you should pick whichever combination makes most sense in your scenario.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    22
    Vote Rating
    0
    roykrish is on a distinguished road

      0  

    Default Paging not working

    Paging not working


    Thanks for replying.

    In my case I don't have any server to return data. I have a static JSON file.

    My Store Class :-
    -----------------------
    Code:
    Ext.define('abc.store.com.fimt.asts.paas.projectListStore', {
        extend: 'Ext.data.Store',
        model: 'abc.model.com.fimt.asts.paas.projectListModel',
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url:  'data/projectList.json',
            reader: {
                type: 'json',
                root: 'data',
                   successProperty: 'success'
            }
        }
    });

    My Json class. ( This file is my datastorage)
    --------------------------------------------
    Code:
    {
        data: [
            {name: 'abc', age: '34'},
            {name: 'def', age: '45'},
            {name: 'ghi', age: '38'},
            {name: 'ghi', age: '38'},
            {name: 'ghi', age: '38'},
            {name: 'ghi', age: '38'},
            {name: 'ghi', age: '38'},
            {name: 'ghi', age: '38'},
            {name: 'ghi', age: '38'}
        ]
    }
    Could you please tell me how could I use 'page' 'start' and 'limit' here.
    Last edited by skirtle; 19 Jan 2012 at 11:24 PM. Reason: Added CODE tags

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,624
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Please use [CODE] tags when posting code.

    Your problem is that you're trying to do something 'not real'. You can't use paging with a static JSON file. The start, page and limit are being sent as request parameters. If your server ignores them because it is using a static file then you can't use paging.

    Depending on your choice of server you may be able to fake it by chopping the static data up into 3 files and then serving up a different file depending on the parameters passed. Most webservers have some sort of support for this.

    Your response format is also incorrect. You need to include a total somewhere, like this:

    Code:
    {
        total: 9,
        data: [
            {name: 'abc', age: '34'},
            {name: 'def', age: '45'},
            {name: 'ghi', age: '38'},
            {name: 'ghi', age: '38'}
        ]
    }
    Another alternative (though quite a convoluted one) is to load all the data into a PagingMemoryProxy.

    I suggest having a read of this page in the docs:

    http://docs.sencha.com/ext-js/4-0/#!...toolbar.Paging

    The bit about passing params to load or autoLoad is misleading, ignore that bit, but the rest is worth a read.

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    22
    Vote Rating
    0
    roykrish is on a distinguished road

      0  

    Default


    Thank you for replying. It works for me.

Thread Participants: 1