Extjs Grid Paging Toolbar Shows All Data and No Page Number

Question

I am using extjs paging toolbar on my grid. I have pagesize 5, but it shows all data(default is I guess 25)... but when I click next page, it still shows the first 25 data. and also have issue with page number where it's blank of 2...when it's suppose to say 1 of 2... Click here to see what it looks like

this is my grid...

var myPageSize = 5;
store.load({
    params: {
        start: 0,
        limit: myPageSize
    }
});
this.grid = Ext.create('Ext.grid.Panel', {
    title: 'GridView App',
    store: store,
    loadMask: true,
    columns: [{
        header: 'Q1',
        sortable: true,
        dataIndex: 'Q1',
        flex: 1,
    }, {
        header: 'Q2',
        sortable: true,
        dataIndex: 'Q2',
        flex: 1,
    }, {
        header: 'Q3',
        sortable: true,
        dataIndex: 'Q3',
        flex: 1,
    }, {
        header: 'Q4',
        sortable: true,
        dataIndex: 'Q4',
        flex: 1,
    }, {
        header: 'Improvements',
        flex: 1,
        sortable: true,
        dataIndex: 'Improvements'
    }, {
        header: 'Comments',
        flex: 1,
        sortable: true,
        dataIndex: 'Comments'
    }],

    bbar: Ext.create('Ext.PagingToolbar', {
        style: 'border:1px solid #99BBE8;',
        store: store,
        displayInfo: true,
        preprendButtons: true,
        displayMsg: 'Displaying Surveys {0} - {1} of {2}',
        emptyMsg: "No Surveys to display"
    }),

    stripeRows: true,
    trackover: true,
    renderTo: Ext.getBody()
});

and this is my store

var store = Ext.create('Ext.data.JsonStore', {
    storeId: 'myData',
    scope: this,
    fields: [{
        name: 'Q1',
        type: 'int'
    }, {
        name: 'Q2',
        type: 'int'
    }, {
        name: 'Q3',
        type: 'int'
    }, {
        name: 'Q4',
        type: 'int'
    }, {
        name: 'Q5',
        type: 'int'
    }, {
        name: 'Improvements',
        type: 'string'
    }, {
        name: 'Comments',
        type: 'string'
    }],

    sorters: [{
        property: 'Q1',
        direct: 'ASC'
    }],

    proxy: {
        type: 'ajax',
        url: 'GridView/writeRecord',
        reader: new Ext.data.JsonReader({
            root: 'myTable',
            totalProperty: 'count'

        })
    }    
});

And my Json looks like this, please click here

UPDATE JSON RESULT

{
"count": 30,
"myTable": [
{
  "Q1": "1",
  "Q2": "1",
  "Q3": "1",
  "Q4": "1",
  "Improvements": "",
  "Comments": "1"
},
{
  "Q1": "1",
  "Q2": "2",
  "Q3": "3",
  "Q4": "4",
  "Improvements": "Iphone5",
  "Comments": "Iphone14"
},
{
  "Q1": "1",
  "Q2": "1",
  "Q3": "3",
  "Q4": "3",
  "Improvements": "This is Comment1-3",
  "Comments": "This is Comment2-3"
},

Answer 1

The issue is with the data you're returning from server. With that store configuration you must return a json formatted like this (note that records fields are different that yours)

{
"success" : true,
"count"   : 2,
"myTable" :[{
    "id"   : 1,
    "cod"  :"100001"
    },{
    "id"   : 2,
    "cod"  :"100001"
    }]
}

Store's root parameter is where extjs expects to have the array of records, success parameter is something you can handle to display server comunication errors and totalProperty is where you tell to extjs how many total records you have fetched. (Answer based on extjs 4.x, but as i can remember with 3.x is the same)