PagingToolbar的Extjs问题-下一页的数据相同
Extjs issue with PagingToolbar - same data on the next page
关于网格分页的不同问题,我发现了很多问题,但仍然找不到答案。
我想将一些数据从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。
相关文章:
- 数据表自动生成的序列号无法正常工作.对于每一页
- PagingToolbar的Extjs问题-下一页的数据相同
- 从页面上点击的链接中删除数据,然后移动到下一页&在CasperJS中重复
- 一页上的多个数据表不起作用
- 如何将数据传递到HighCharts中的下一页
- 如果下一页或其他某个页面 JQuery 数据表中存在该行,如何删除该行
- 使用滚动重新加载 Jqgrid 时出现问题 - 重复的行数据并缺少最后一页
- 如何一次获取一页的数据
- 数据表在页面加载时转到最后一页
- 选择2-无限滚动不加载带有远程数据的下一页
- 有两个html页面.当我从下一页恢复到第一页时,我希望保存第一页的数据状态
- 一页上有多个表的数据表
- 当一页上有超过24个表单时,操作表单数据
- 富文本编辑器(使用YUI简单文本编辑器)未将数据发送到下一页
- 从前一页的数据传输到第二页PHP/MySQL
- Javascript发布数据并转到下一页
- 在yii2中将数据传递到下一页
- 在JS中发送数据到下一页以触发事件
- 为什么下面的JSPDF代码在下一页上打印数据?
- C#将表单元格数据从一页发送到另一页