Question

我已将分页合并到我的代码中..但我的分页似乎没有正常工作。我试图显示3个结果perpage ..但它显示在一个页面中，当你点击下一个它重复相同的结果。

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

Ext.onReady(function(){
    Ext.define('Book',{
        extend: 'Ext.data.Model',
        fields: [
            // set up the fields mapping into the xml doc
            // The first needs mapping, the others are very basic
            {name: 'Author', mapping: 'ItemAttributes > Author'},
            'Title', 'Manufacturer', 'ProductGroup'
        ]
    });

    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
         pageSize: 3,                  
        model: 'Book',
        autoLoad: true,
        proxy: {
            // load using HTTP
            type: 'ajax',
            url: 'sheldon-2.xml',
            // the return will be XML, so lets set up a reader
            reader: {
                type: 'xml',
                // records will have an "Item" tag
                record: 'Item',
                idProperty: 'ASIN',
                totalRecords: '@total'
            }
        }
    });

    // create the grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
            {text: "Title", width: 180, dataIndex: 'Title', sortable: true},
            {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
            {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
        ],
        renderTo:'example-grid-group-v3',
        width: 540,
        height: 200,
        // paging bar on the bottom
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"

        })
    });
});

Answer 1

它的工作方式是，你需要在服务器上有一个程序（PHP或ASPX或类似的东西），它接受分页信息并在页面中发送数据。在您的情况下，它是一个静态XML文件，在请求时将完整返回。我不确定您是否可以在客户端获得所有数据，并且仍然有ExtJS为您执行分页。您可能希望对不同的商店/代理进行更多研究，以确定是否可行。如果您想从服务器引入所有数据并仅渲染当前显示的数据，则缓冲滚动是另一种选择。

Answer 2

请将 pageSize：3 行移至 Ext.PagingToolbar 对象。在服务器端处理分页。客户端将参数发送到服务器端，服务器需要解释该参数，然后使用适当的数据进行响应。似乎 sheldon-2.xml 不支持分页并返回所有记录。请参阅Ext.PagingToolbar文档中的示例。

Extjs没有正确分页

2 个答案: