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 に答える