Ext Js Paging 无法导航到下一页，刷新，最后一页不起作用

Question

抱歉，我认为这可能是重复的。但我没有从任何地方得到正确的答案。请帮我找出问题所在。

我正在创建一个带有商店的 Ext Js 网格。也在这个博客的帮助下 http://blog.jardalu.com/2013/6/21/grid-paging-extjs-sencha

我正在创建网格，其中加载第一个页面的数据页面。但是当我按下一个、最后一个、刷新时，没有任何事件起作用。另外，从控制台我从 ext js 文件中收到了这样的错误

Uncaught TypeError: Cannot read property 'name' of undefined 

请帮我找出问题所在。

代码：-

/*global Ext:false */
Ext.require([
    'Ext.data.*',
    'Ext.grid.*'
]);


Ext.onReady(function () {
    var itemsPerPage = 2; // set the number of items you want per page
    var store = Ext.create('Ext.data.Store', {
        id: 'simpsonsStore',
        autoLoad: false,
        fields: ['name', 'email', 'phone'],
        pageSize: itemsPerPage,
        data: {
            'items': [{
                'name': 'Lisa',
                "email": "[email protected]",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "[email protected]",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "[email protected]",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "[email protected]",
                "phone": "555-222-1254"
            }]
        },

        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items',
                totalProperty: 'total'
            }
        },
      listeners : {
            beforeload : function(store, operation, eOpts){
                var page = operation.page;
                var limit = operation.limit;
                var dataResult = [];
             var startPage = (page -1) * 2;
              var totalCount = startPage + limit;
              console.log(store.proxy.data);
              for (var i = startPage; i < totalCount ; i++) {
               dataResult.push(store.proxy.data.items[i]); 
              }

                store.proxy.data.items = dataResult;
                store.proxy.data.total = 4;
            }
        }
    });

  var TOTAL = 94; //random

    // specify segment of data you want to load using params
  store.loadPage(1);
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: store,
        columns: [{
            header: 'Name',
            dataIndex: 'name'
        }, {
            header: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            header: 'Phone',
            dataIndex: 'phone'
        }],
        width: 400,
        height: 125,
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: store, // same store GridPanel is using
            dock: 'bottom',
            displayInfo: true
        }],
        renderTo: Ext.getBody()
    });
});

请在此处查看演示：- http://jsfiddle.net/B6qBN/

Answer 1

我不知道你的问题（实际上我试图解决问题但不想花太多时间）。这是工作示例。在我看来，存在数据模型问题。

Sencha Fiddle：分页工具栏

// Json File for demostration
{
    "total": 5,
    "userList":[
        {"uid": "1", "firstName":"Tommy","lastName":"Maintz"},
        {"uid": "2", "firstName":"Ed","lastName":"Spencer"},
        {"uid": "3", "firstName":"Oğuz","lastName":"Çelikdemir"},
        {"uid": "4", "firstName":"Jamie","lastName":"Avins"},
        {"uid": "5", "firstName":"Dave","lastName":"Kaneda"}
    ]
}    


// the following is code section
var itemsPerPage = 2;   // set the number of items you want per page

Ext.onReady(function(){

    Ext.define('senchatest.model.Contact', {
       extend: 'Ext.data.Model',
       fields: [
          {name: 'firstName', type: 'string'},
          {name: 'lastName', type: 'string'}
       ]
    });

    var UserList = new Ext.data.JsonStore ({
        model: 'senchatest.model.Contact',
        pageSize: itemsPerPage,
        proxy: {
            type: 'ajax',
            url : 'contacts.json',
            reader: {
                type: 'json',
                root: 'userList',
                totalProperty: 'total'
            }
        }
    });
    UserList.load();

    var users = Ext.create('Ext.form.Panel', {
        bodyPadding: 10,
        width: 300,
        height: 400,
        title: 'User List',
        items: [
            {
                xtype: 'gridpanel',
                store: UserList,
                columns: [
                    {text: 'Name', dataIndex: 'firstName'},
                    {text: 'Surname', dataIndex: 'lastName'}
                ],
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: UserList,   // same store GridPanel is using
                    dock: 'bottom',
                    displayInfo: true
    }]
            }
        ],
        renderTo: Ext.getBody()
    })
});