分页在 Ext JS 中不起作用

Question

我是 Ext JS 的新手。我刚刚参考了 Sencha Ext Js 中发布的示例，目前正在网格中使用分页。我不确定分页是如何工作的，对此有一点疑问。问题是分页工具栏显示在网格的底部。但所有记录都显示在同一页面中。我尝试在类似论坛中建议的商店内设置 pageSize，甚至设置 autoLoad 功能，但它无法正常工作。这是我在数据存储、网格和分页工具栏中使用的示例片段。

数据存储代码：

var itemPageSize = 5;
var bulkDevStore = Ext.create('Ext.data.ArrayStore', {
         pageSize: itemPageSize,
        fields : [ {
            name : 'date'
        }, {
            name : 'userid'
        }, {
            name : 'filename'
        }

        ],

          autoLoad:{ start: 0, limit: itemPageSize} 

    });

网格片段：

var bulkStatsGrid = Ext.create('Ext.grid.Panel', {
        columnLines : true,
        width:'100%',
        height:'100%',
        title : "Statistics",
        store : bulkDevStore,
        disableSelection: true,
        loadMask: true,
        id : 'bulkstatsgrid',

            columns : [ {
            text : 'Date',
            width : '10%',
            sortable : false,
            dataIndex : 'date'
        }, {
            text : 'User Id',
            width : '10%',
            sortable : true,
            dataIndex : 'userid'
        }, {
            text : 'File Name',
            width : '79.8%',
            sortable : true,
            dataIndex : 'filename'
        } ],

分页片段：

            bbar: Ext.create('Ext.PagingToolbar', {
        store: bulkDevStore,
        refresh : false,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display",

但它总是显示 Pages 0 of 0 。整个事情似乎都被禁用了。有什么帮助吗？

Answer 1

确保您拥有

total

属性：

...
total: 'value.total',
pageSize: 5,
...

您必须在商店的数据响应中给出总财产。

尽量不要

autoload

商店，但在创建商店和工具栏后，调用

store.load()

Answer 2

它显示第 0 页（共 0 页），因为您没有向数据存储提供任何数据，
使用数据配置来提供数据。

http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.ArrayStore