PagingToolbar的Extjs问题-下一页的数据相同

Extjs issue with PagingToolbar - same data on the next page

本文关键字:数据 一页 -下 Extjs 问题 PagingToolbar      更新时间:2024-01-16

关于网格分页的不同问题,我发现了很多问题,但仍然找不到答案。

我想将一些数据从googleapi加载到具有分页功能的extjs网格中。

比方说,我们可以使用以下链接查询Google JSON API。

https://www.googleapis.com/books/v1/volumes?fields=totalItems,items(id,volumeInfo/title,volumeInfo/subtitle,volumeInfo/authors,volumeInfo/publishedDate,volumeInfo/description,volumeInfo/imageLinks)&q=Neuromarketing&maxResults=40&startIndex=0

正如您所看到的,我每次可以从"startIndex"位置查询与"maxResults"一样多的记录。

json的简短示例是

{
 "totalItems": 298,
 "items": [
  {
    ..

首先,我定义了一个模型和一个商店:

Ext.define('MyApp.view.main.Book', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id'},
        {name: 'publishedDate', mapping: 'volumeInfo.publishedDate'},
        {name: 'title', mapping: 'volumeInfo.title'}
    ]
});
Ext.define('MyApp.view.main.Books', {
    extend: 'Ext.data.Store',
    model: 'MyApp.view.main.Book',
    buffered: true,
    pageSize: 15,
    alias: 'store.books',
    autoLoad: true,
    proxy: {
        type: 'jsonp',
        url: 'https://www.googleapis.com/books/v1/volumes?fields=totalItems,items(id,volumeInfo/title,volumeInfo/subtitle,volumeInfo/authors,volumeInfo/publishedDate,volumeInfo/description,volumeInfo/imageLinks)',
        extraParams: {
            q : 'Javascript',
            maxResults : 15,
            startIndex : 0
        },
        reader: {
            type: 'json',
            rootProperty: 'items',
            totalProperty: 'totalItems'
        }
    }
});

其次,我定义了一个View

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'MyApp.view.main.MainModel'
    ],
    xtype: 'app-main',
    controller: 'main',
    viewModel: {
        type: 'main'
    },
    layout: {
        type: 'border'
    },
    items: [
    {
        region: 'center',
        xtype: 'tabpanel',
        reference: 'tabPanel',
        items:[
        {
            title: 'Result',
            reference: 'tabPanelResultTab',
            layout: 'fit',
            items: [{
                xtype: 'grid',
                reference: 'grid',
                title: 'Books',
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    bind: {
                        store: '{summary}'
                    },
                    dock: 'bottom',
                    displayInfo: true
                }],
                bind: {
                    store: '{summary}'
                },
                columns: [
                    { text: 'Google ID',  dataIndex: 'id', flex: 1 },
                    { text: 'Title', dataIndex: 'title', flex: 4 },
                    { text: 'Published Date', dataIndex: 'publishedDate', flex: 1}
                ]
            }]
        }]
    }]
});

第三,我定义了ViewModel

Ext.define('MyApp.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',
    requires: [
        'MyApp.view.main.Books'
    ],
    alias: 'viewmodel.main',
    data: {
        name: 'MyApp'
    },
    stores: {
        summary: {
            type: 'books'
        }
    }
});

所以现在,当我点击页面工具栏上的下一页时,加载图像弹出,然后在第二页加载与我在第一页看到的完全相同的数据。我仍然不明白,如何告诉PagingToolbar从下一个"startIndex"开始查询。是否可以将"start"answers"limit"变量更改为我的"startIndex"answers"maxResults"?

是的,您可以在代理级别配置它。请参阅startParam和limitParam。