Ext Js Paging not able to navigate to next Page, refresh, Last page not working

Question

Sorry I think this may be a duplicate. But I am not getting correct answer from anywhere. Please help me to find the issue.

I am creating a Ext Js grid with store. Also with the help of this blog http://blog.jardalu.com/2013/6/21/grid-paging-extjs-sencha

I am creating Grid whcih loads Data Page for the first PAge. But when I press next, last, refresh no events are working. Also from the console am getting an error like this from ext js file

Uncaught TypeError: Cannot read property 'name' of undefined 

Please help me to find the issue.

Code:-

/*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": "lisa@simpsons.com",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "bart@simpsons.com",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "home@simpsons.com",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "marge@simpsons.com",
                "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()
    });
});

Please see the DEMO here :- http://jsfiddle.net/B6qBN/

Answer 1

I don't know your problem ( actually I tried to fix issue but didn't want to spent much time ). Here is the working sample. It seems to me, there is a data model problem.

Sencha Fiddle: Paging Toolbar

// 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()
    })
});