Ext Js Paging не может перейти к следующей странице, обновить, последняя страница не работает

Question

Извините, я думаю, что это может быть дубликат. Но я не получаю правильный ответ нигде. Пожалуйста, помогите мне найти проблему.

Я создаю сетку Ext Js с магазином. С помощью этого блога http://blog.jardalu.com/2013/6/21/grid-paging-extjs-sencha

Я создаю Grid whcih загружает страницу данных для первой PAge. Но когда я нажимаю следующий, последний, обновляю, никакие события не работают. Также из консоли я получаю такую ​​ошибку из файла 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": "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() 
    }); 
}); 

Пожалуйста, смотрите DEMO здесь: - http://jsfiddle.net/B6qBN/

Answer 1

я не знаю вашу проблему (на самом деле я пытался исправить проблему, но не хотел провел много времени) , Вот рабочий образец. Мне кажется, что проблема с моделью данных.

Сенча 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() 
    }) 
});