Extjs Grid Paging Toolbar показывает все данные и номер страницы

Question

Я использую панель инструментов пейджинга extjs на моей сетке. У меня есть страница 5, но она показывает все данные (по умолчанию это 25) ... но когда я нажимаю следующую страницу, она по-прежнему показывает первые 25 данных. а также имеет проблемы с номером страницы, где это заготовка 2 ... когда это предположит, сказать 1 из 2 ... Click here to see what it looks like

это моя сетка ...

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' 

     }) 
    }  
}); 

And my Json looks like this, please click here

UPDATE 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" 
    }] 
} 

корневого параметр магазин, где ExtJS ожидает, чтобы иметь массив записей, параметр успеха является то, что вы можете справиться чтобы отображать ошибки связи с сервером, а totalProperty - это то, где вы указываете, сколько полных записей вы выбрали. (Ответ основан на extjs 4.x, но, как я помню, с 3.x то же самое)