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

Posted 2023-02-19

【中文标题】Ext Js Paging 无法导航到下一页，刷新，最后一页不起作用

【英文标题】：Ext Js Paging not able to navigate to next Page, refresh, Last page not working

【发布时间】：2014-04-29 18:04:29

【问题描述】：

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

我正在创建一个带有商店的 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": "[e-mail]",
                "phone": "555-111-1224"
            , 
                'name': 'Bart',
                "email": "[e-mail]",
                "phone": "555-222-1234"
            , 
                'name': 'Homer',
                "email": "[e-mail]",
                "phone": "555-222-1244"
            , 
                'name': 'Marge',
                "email": "[e-mail]",
                "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/

【参考方案1】：

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

煎茶小提琴：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()
    )
);

【讨论】：

感谢您的回复。一旦我从服务器完全获取数据集。让 javascript 完成所有操作。我已经按照我的要求附加了演示。但是在第一页本身的那个样本中，所有数据都是可用的。但是分页工具栏会自动更新。 jsfiddle.net/WUK4V