Extn JS 4.2.0 网格分页不起作用

Question

这是我的 app.js 代码

Ext.require([
    'Ext.data.*',
    'Ext.grid.*'
]);

var TOTAL = 94; //random

var fetchedData = function(){
    this.data = null;
    this.total = 0;
}




// code to create grid

Ext.onReady(function(){
    Ext.define('Person',{
        extend: 'Ext.data.Model',
        fields: [
            { name: 'fname', type: 'string' },
            { name: 'lname', type: 'string' },
            { name: 'email', type: 'string' },
            { name: 'uid', type: 'string' },
            { name: 'isSup', type: 'boolean' },
            { name: 'upDate', type: 'string' },
            { name: 'upBy', type: 'string' }
        ]
    });

    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        model: 'Person',
        pageSize : 2,
        proxy: {
            type: 'ajax',
            url : 'supUserStore.json',
            reader: {type: 'json', root : 'data', totalProperty : 'total'}
        },
        sorters: [{
            property : 'Id',
            direction:'ASC'
        }],

    });
store.loadPage(1);
    // create the grid
    Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
              { header: 'First Name',dataIndex: 'fname' },
              { header: 'Last Name', dataIndex: 'lname' },
              { header: 'Email', dataIndex: 'email'},
              { header: 'User ID', dataIndex: 'uid' },
              { header: 'Super Admin', dataIndex: 'isSup'},
              { header: 'Updated Date',dataIndex: 'upDate'},
              { header: 'Updated By',dataIndex: 'upBy'}
             ],
        // paging bar on the bottom
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: '{0} - {1} of {2}',
            emptyMsg: "No topics to display"
        }),
        renderTo:'grid-example',
        width: 350,
        height: 280,
    });

    // trigger the data store load
    store.loadPage(1);
});

我的 json 数据是一个 json 文件：

{
    "success": true,
    "total": 11,
    "data":  [
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com"}
            ] 
}

我可以用数据加载网格，但无法分页，所有记录都加载到一页中。请帮助我并告诉我我做错了什么。

Answer 1

这段代码对我来说工作正常，我删除了对 loadPage 的顶部调用，也删除了 fetchedData 函数，因为它没有被使用。

我没有改变任何其他东西。只是将代码包装在启动函数中而不是 Ext.ready 中 fiddle.

fiddle

// data1.json
{
    "success": true,
    "total": 11,
    "data":  [
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com"}
            ] 
}

// app.js
Ext.application({
    name: 'Fiddle',

    launch: function() {

        Ext.define('Person', {
            extend: 'Ext.data.Model',
            fields: [{
                name: 'fname',
                type: 'string'
            }, {
                name: 'lname',
                type: 'string'
            }, {
                name: 'email',
                type: 'string'
            }, {
                name: 'uid',
                type: 'string'
            }, {
                name: 'isSup',
                type: 'boolean'
            }, {
                name: 'upDate',
                type: 'string'
            }, {
                name: 'upBy',
                type: 'string'
            }]
        });

        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            model: 'Person',
            pageSize: 2,
            proxy: {
                type: 'ajax',
                url: 'data1.json',
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'total'
                }
            },
            sorters: [{
                property: 'Id',
                direction: 'ASC'
            }],

        });

        // create the grid
        Ext.create('Ext.grid.Panel', {
            store: store,
            columns: [{
                header: 'First Name',
                dataIndex: 'fname'
            }, {
                header: 'Last Name',
                dataIndex: 'lname'
            }, {
                header: 'Email',
                dataIndex: 'email'
            }, {
                header: 'User ID',
                dataIndex: 'uid'
            }, {
                header: 'Super Admin',
                dataIndex: 'isSup'
            }, {
                header: 'Updated Date',
                dataIndex: 'upDate'
            }, {
                header: 'Updated By',
                dataIndex: 'upBy'
            }],
            // paging bar on the bottom
            bbar: Ext.create('Ext.PagingToolbar', {
                store: store,
                displayInfo: true,
                displayMsg: '{0} - {1} of {2}',
                emptyMsg: "No topics to display"
            }),
            renderTo: Ext.getBody(),
            width: 350,
            height: 280,
        });

        // trigger the data store load
        store.loadPage(1);
    }
});

Extn JS 4.2.0 网格分页不起作用

Extn JS 4.2.0 Pagination for grid not working

javascript

pagination

extjs