ExtJS : paging not working and refresh button

Question

I use the code below. I see the grid, the content is correct but the pager section strange.

1. The button "next", "previous", ... are not enabled. There are 4 records and I ask 3 records by page, I should see "Page 1 of 2"
2. How can I manage the "refresh" button.

Thanks,

    $(document).ready(function () {

        Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: [
            { name: 'FirstName', type: 'string' },
            { name: 'LastName', type: 'string' },
            { name: 'Email', type: 'string' }
        ]
        })

        var userStore = Ext.create('Ext.data.Store', {
            model: 'User',
            proxy: {
                type: 'ajax',
                url: '/Home/GetUsers',
                reader: {
                    type: 'json',
                    root: 'users'
                }
            },
            autoLoad: true
        });


        Ext.create('Ext.grid.Panel', {
            renderTo: 'testing',
            store: userStore,
            autoScroll: true,
            layout: 'fit',
            title: 'Users',
            width:450,
            columns: [{
                text: 'First Name',
                width: 225,
                sortable: true,
                dataIndex: 'FirstName',
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {
                text: 'Last Name',
                width: 225,
                sortable: true,
                dataIndex: 'LastName',
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }],
            bbar : Ext.create('Ext.toolbar.Paging', {
                store: userStore,
                pageSize: 3,
                displayInfo: true,
                displayMsg: 'Displaying topics {0} - {1} of {2}',
                emptyMsg: "No topics to display"
            })

        });

    });

Update1 :

{"total":2,"success":true,"data":[{"Id":1,"FirstName":"AA","LastName":"BB"},{"Id":2,"FirstName":"CC","LastName":"DD"},{},{}]}

I still don't see the "Page x of 2"

Answer 1

http://jsfiddle.net/AnYeq/1/ I don't see anything wrong with the current page text. Even with test json data without “total” property. Controlling the refresh button is not so obvious. You can try to extend Ext.toolbar.Paging and override its private method getPagingItems.