如何在Extension JS Simple Grid中启用分页

Question

我在Extension Js中有以下网格，我使用Json绑定我的网格。我想在网格中启用分页，其中一些页面大小为'10'，但我的分页不起作用。

这是我的代码，

Ext.onReady(function () {
    var dataStore = new Ext.data.JsonStore({
        proxy: {
            type: 'ajax',
            url: 'Default.aspx/CustomerData', //'web.aspx',
            headers: { 'Content-type': 'application/json' },
            reader: {
                type: 'json',
                root: 'd'
            }
        },
        fields: [
      { name: 'firstname', type: 'string' },
      { name: 'lastname', type: 'string' },
      { name: 'age', type: 'string' },
      { name: 'phone', type: 'string' }
    ]
    });

    dataStore.load();
    var myGrid1 = new Ext.grid.GridPanel({
        id: 'customerslist',
        store: dataStore,
        columns: [
        { id: "firstname", header: "First Name", width: 100, dataIndex: "firstname", sortable: true },
        { header: "Last Name", width: 100, dataIndex: "lastname", sortable: true },
        { header: "Age", width: 100, dataIndex: "age", sortable: true },
        { header: "Phone", width: 100, dataIndex: "phone", sortable: true }
      ],
        autoLoad: false,
        stripeRows: true,
        autoHeight: true,
        width: 450,
        height: 300,
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: dataStore,  
            dock: 'bottom',
            displayInfo: true
        }],
        renderTo: 'grid1'
    });
});

Answer 1

尝试在商店属性中添加pageSize：10

var dataStore = new Ext.data.JsonStore({
        proxy: {
            type: 'ajax',
            url: 'Default.aspx/CustomerData', //'web.aspx',
            headers: { 'Content-type': 'application/json' },
            reader: {
                type: 'json',
                root: 'd'
            }
        },
        fields: [
      { name: 'firstname', type: 'string' },
      { name: 'lastname', type: 'string' },
      { name: 'age', type: 'string' },
      { name: 'phone', type: 'string' }
    ],
        pageSize: 10
    });