Question

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

我想将一些数据从googleapis加载到具有分页能力的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

正如您所看到的，我每次可以查询尽可能多的记录为'maxResults'和'startIndex'位置。

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'
        }
    }
});

其次，我已经定义了一个视图

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上的下一页时，弹出加载图像，然后在第一页上看到的第二页上加载完全相同的数据。我还是不明白，如何告诉PagingToolbar从下一个'startIndex'查询。是否可以将'start'和'limit'变量更改为'startIndex'和maxResults'？

Answer 1

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

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

1 个答案: