0

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"
},
4

1 回答 1

2

问题在于您从服务器返回的数据。使用该商店配置，您必须返回格式如下的 json（请注意，记录字段与您的不同）

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

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

于 2012-09-27T21:42:02.193 回答