Extjs Grid Paging工具栏显示所有数据和无页码

Question

我正在我的网格上使用extjs分页工具栏。 我有页面大小5，但它显示所有数据（默认是我猜25）...但是当我点击下一页时，它仍然显示前25个数据。 并且还有页码的问题，它是2的空白......当它假设说2中的1时... 点击这里查看它看起来像什么

这是我的网格......

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()
});

这是我的商店

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'

        })
    }    
});

我的Json看起来像这样，请点击这里

更新 JSON结果

{
"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

问题在于您从服务器返回的数据。 使用该存储配置，您必须返回一个格式为这样的json（请注意，记录字段与您的不同）

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

Store的根参数是extjs期望具有记录数组的位置，success参数是您可以处理以显示服务器通信错误的内容，而totalProperty是您告诉extjs您已获取的总记录数。 （基于extjs 4.x的答案，但我记得3.x是一样的）