Extjs Paging Toolbar in Grid does not work

Question

I have searched high and low for this problem... and I found a lot of people have the same problem but none have a definite solution... Basically I have a grid on extjs... it gets data from sqldb. It loads fine using json. "But"... when trying to implement paging, this is where it gets messy...

1. pagesize is set to 5... which means first page should only show 5 records, but my grid shows the entire records

2. Even though the "next" button exists, it does not work technically because the entire record is already there on the first page

3. I set page.loadPage(2)... and the message says "Displaying Second Page", but it's actually displaying the entire records

4. The page number in "Page _ of 6" is always blank. see below image...

   

Below is my store...

       var store = Ext.create('Ext.data.Store', {
        storeId: 'myData',
        pageSize: 5,
        autoLoad: true,
        method: "POST",
        remoteSort: true,
        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: {
                type: 'json',
                totalProperty: "count",
                root: "myTable"
            }
        },
        autoLoad: { params: { start: 0, limit: 5} }   

    });

    this.grid = Ext.create('Ext.grid.Panel', {
        title: ' ',
        trackMouseOver: true,
        disableSelection: true,
        autoHeight: true,
        store: store,
        loadMask: true,
        height: 500,
        width: 800,
        renderTo: Ext.getBody(),
        columns: [

        { header: 'Q1',
            sortable: true, dataIndex: 'Q1'
        },
        { header: 'Q2',
            sortable: true, dataIndex: 'Q2'
        },
        { header: 'Q3',
            sortable: true, dataIndex: 'Q3'
        },
        { header: 'Q4',
            sortable: true, dataIndex: 'Q4'
        },
        { header: 'Improvements', flex: 1,
            sortable: true, dataIndex: 'Improvements'
        },
        { header: 'Comments', flex: 1,
            sortable: true, dataIndex: 'Comments'
        }
    ],
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            preprendButtons: true,
            displayMsg: 'Displaying Surveys {0} - {1} of {2}',
            emptyMsg: "No Surveys to display"

        })
    });

and this is my JSON... it has actually 30 records but I trimmed it down...

  {
  "count": 30,
  "myTable": [
  {
  "Q1": "1",
  "Q2": "1",
  "Q3": "1",
  "Q4": "1",
  "Improvements": "",
  "Comments": "1"
},
{
  "Q1": "3",
  "Q2": "2",
  "Q3": "2",
  "Q4": "2",
  "Improvements": "This is A very long comment. What do you think?",
  "Comments": "Agreed"
},
{
  "Q1": "4",
  "Q2": "2",
  "Q3": "4",
  "Q4": "3",
  "Improvements": "Hello2",
  "Comments": "Hello2"
},
{
  "Q1": "3",
  "Q2": "2",
  "Q3": "2",
  "Q4": "1",
  "Improvements": "Hello4",
  "Comments": "Hello4"
}

] }

Also if it helps this is how I get my Json

        string sqlquery = "SELECT Q1, Q2, Q3, Q4, Improvements, Comments FROM ITable";
        conn.Open();
        SqlDataAdapter cmd = new SqlDataAdapter(sqlquery, conn);
        SqlCommand comd = new SqlCommand(sqlquery, conn);
        DataSet myData = new DataSet();
        cmd.Fill(myData, "myTable");

        comd.CommandText = "SELECT COUNT(*) FROM ITable";
        Int32 count = (Int32)comd.ExecuteScalar();

        comd.ExecuteNonQuery();
        conn.Close();


        var results = (new

        {

            TotalNumber = count,

            myTable = myData

        });

        return JsonConvert.SerializeObject(new { count=count, myTable = myData.Tables[0] }, Formatting.Indented,
                        new JsonSerializerSettings
                        {
                            ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                        });

I know my Json is right... and it reads 30 records because is says "Displaying _ of 30"... I just have no clue what I am doing wrong... It cannot be a browser issue... why is it throwing up all in one page? anybody?

Answer 1

When using the paging toolbar, the server is supposed to page the data for you. You don't feed it all of the records at once.

The paging toolbar will send requests asking for each page, and the server is supposed to return just the records for that page.

If you want to page with in memory data (fetching them all at once, you have to implement your own, or use one of the extensions.

See the section titled "Paging with Local Data" at http://docs.sencha.com/ext-js/4-1/#!/api/Ext.toolbar.Paging

Therefore, to use it as intended, you have to change your server code to account for the start and limit HTTP parameters