Pagging正在使用静态但不适用于动态数据

Question

我正在尝试使用json数据加载网格，并在底栏中加载Pagging。

我的分页正在加载但无效。同样，这适用于静态数据。

这是我的静态数据小提琴，Fiddle_Static 这是我的静态数据，Fiddle Dynamic 这是我的代码。

var ItemsPerPage = 3;

Ext.create('Ext.data.Store', {
    storeId: 'Store',
        proxy :{
        enablePaging: true,
        type:'ajax',
        url: 'data1.json',
        reader:{
            type:'json',
            rootProperty:"root"
        }
    },
    pageSize: ItemsPerPage,
    autoLoad:true,
    fields: ['Surname','Name','RollNo']
});

Ext.create('Ext.grid.Panel', {
    title: 'Student',
    store:Ext.data.StoreManager.lookup('Store'),

    columns:
[
   { text : 'SName' , dataIndex: 'Surname' ,width : 100},
   { text : 'Name' ,  dataIndex: 'Name' ,width : 100},
   { text : 'RNum' ,  dataIndex: 'RollNo' ,width : 100}
],
    width: 340,
    height:250,
    dockedItems: [{
        xtype:'pagingtoolbar',
        store:'Store',
        dock: 'bottom',
        displayInfo:true
        }],
    renderTo: document.body
});

任何人都可以帮我解决这个问题。

Answer 1

对外部数据源进行分页要求服务器仅传递请求的记录。

当第一页加载到网格中时，商店会向服务器发送请求：

$P$

并希望服务器以

回答

data1.json?page=1&start=0&limit=3

当用户想要查看第2页时，客户端会向服务器发送请求：

success:true,
total:27,
data:[{Id:0},{Id:1},{Id:2}] (<-- three items only!)

并期待答案

data1.json?page=2&start=3&limit=3

等等。

您的数据源现在正在返回所有项目，但客户只要求前三项。

要在小提琴中获取动态数据源，您必须检查data1.json顶部的“动态数据源”，然后标题更改为：

success:true,
total:27,
data:[{Id:3},{Id:4},{Id:5}] (<-- three items only!)

现在你可以填写功能体，例如

快速而肮脏

function(params, req, Fiddle) {

如何在最终项目中执行此操作取决于后端的外观。

Answer 2

我认为这不起作用，因为行width上的{ text : 'SName' , dataIndex: 'Surname' ,width : 100},总和与表width: 340,