Paging in extjs grid

Question

I have a html page having a div id="grid-example".

I referred a js file contains as following code

Ext.onReady(function () {

var myData = [
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
    ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
    ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
    ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
    ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
    ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
    ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
    ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
    ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
    ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
    ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
    ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
    ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
    ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
    ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
    ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
    ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
    ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
    ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
    ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
    ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am']

];

// create the data store
var store = Ext.create('Ext.data.ArrayStore', {

    fields: [
       { name: 'company' },
       { name: 'price', type: 'float' },
       { name: 'change', type: 'float' },
       { name: 'pctChange', type: 'float' },
       { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ],
   data: myData

});

// create the Grid
//var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    stateful: true,
    stateId: 'stateGrid',

    columns: [
        {
            text: 'Company',
            flex: 1,
            sortable: true,
            dataIndex: 'company'
        },

        {
            text: 'Price',
            width: 75,
            sortable: true,
            //renderer: 'usMoney',
            dataIndex: 'price',
            menuDisabled: true //it will show/hide menu for sorting.

        },

        {
            text: 'Change',
            width: 75,
            sortable: true,
            dataIndex: 'change',
            menuDisabled: true //it will show/hide menu for sorting.
        },

        {
            text: '% Change',
            width: 75,
            sortable: true,
            dataIndex: 'pctChange'
        },

        {
            text: 'Last Updated',
            width: 185,
            sortable: true,
            renderer: Ext.util.Format.dateRenderer("d/M/yy"),
            dataIndex: 'lastChange'
        },

    ],

        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            pageSize: 5,              
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"

        }),

    height: 550,
    width: 600,
    title: 'Array Grid',
    renderTo: 'grid-example',
    viewConfig: {
    stripeRows: true

    }
});

});

I am getting the grid but paging is not working...please help me.` I want no. of rows should be 5 per page.

Answer 1

@Amit

I see that you are using the local array to populate the data in the grid panel. ExtJS grid panel paging toolbar works only with the server side data and uses the following properties to fetch the data from the server and calculate the pages:

• start
• limit
• totalProperty - on the reader
• pageSize

The server must handle the start and limit and the pageSize to return the requested data and set the total number of records to the a property, which is set to totalProperty (say, 'totalRecords').

In case you are looking for pagination with the in-memory data, you may refer to http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5 or refer to the examples code in your downloaded extjs 3.x folder - examples/ux/PagingMemoryProxy.js

Answer 2

pageSize: 5 config must go on the store.

Answer 3

Try with delete limit:10 I don't see it in the Ext.PagingToolbar's configs.

Answer 4

For me setting the proper reader properties is what did it. Then you just have to handle the query string parameters start and limit on your server to perform the selection of data. DataSource.Skip(start).Take(limit);

var myStore = Ext.create('Ext.data.Store', {
    model: 'Book',
    pageSize: 10,
    proxy: {
        type: 'ajax',
        url: '/api/data',
        reader: {
            // sends url?start={number}&limit={number}
            type: 'json',
            totalProperty: "results",
            root: "rows"
        }
    },
    autoLoad: { params: { start: 0, limit: 10 } }
});

---

The resposne that I would return from the web service to coincide with the above settings.

{
    "success":"true",
    "results":100,
    "rows":[
        {"Title":"Book #61","Author":"Some Guy","Year":2010}
        ....
        ....
    ]
}