我正在用pagingtoolbar渲染网格。api工作正常,根据start和limit参数返回了所需的记录数。但页面工具栏的“下一页”按钮被禁用。我查看了一些文档,发现它们需要rootProperty和totalProperty参数。但我返回的数据没有这样的属性。如何解决这个问题。
这是来自api的响应数据-
[
{
"filmId": 1,
"title": "ACADEMY DINOSAUR",
"description": "A Epic Drama of a Feminist And a Mad Scientist who must Battle a Teacher in The Canadian Rockies",
"releaseYear": "2005",
"rating": "PG-13",
"specialFeatures": "Deleted Scenes,Behind the Scenes",
"language": "German"
},
{
"filmId": 2,
"title": "ACE GOLDFINGER",
"description": "A Astounding Epistle of a Database Administrator And a Explorer who must Find a Car in Ancient China",
"releaseYear": "2003",
"rating": "G",
"specialFeatures": "Trailers,Deleted Scenes",
"language": "English"
},
{
"filmId": 3,
"title": "ADAPTATION HOLES",
"description": "A Astounding Reflection of a Lumberjack And a Car who must Sink a Lumberjack in A Baloon Factory",
"releaseYear": "2006",
"rating": "NC-17",
"specialFeatures": "Trailers,Deleted Scenes",
"language": "English"
},
{
"filmId": 4,
"title": "AFFAIR PREJUDICE",
"description": "A Fanciful Documentary of a Frisbee And a Lumberjack who must Chase a Monkey in A Shark Tank",
"releaseYear": "2006",
"rating": "G",
"specialFeatures": "Commentaries,Behind the Scenes",
"language": "English"
},
{
"filmId": 5,
"title": "AFRICAN EGG",
"description": "A Fast-Paced Documentary of a Pastry Chef And a Dentist who must Pursue a Forensic Psychologist in The Gulf of Mexico",
"releaseYear": "2006",
"rating": "G",
"specialFeatures": "Deleted Scenes",
"language": "English"
},
{
"filmId": 6,
"title": "AGENT TRUMAN",
"description": "A Intrepid Panorama of a Robot And a Boy who must Escape a Sumo Wrestler in Ancient China",
"releaseYear": "2006",
"rating": "PG",
"specialFeatures": "Deleted Scenes",
"language": "English"
},
{
"filmId": 7,
"title": "AIRPLANE SIERRA",
"description": "A Touching Saga of a Hunter And a Butler who must Discover a Butler in A Jet Boat",
"releaseYear": "2006",
"rating": "PG-13",
"specialFeatures": "Trailers,Deleted Scenes",
"language": "English"
},
{
"filmId": 8,
"title": "AIRPORT POLLOCK",
"description": "A Epic Tale of a Moose And a Girl who must Confront a Monkey in Ancient India",
"releaseYear": "2006",
"rating": "R",
"specialFeatures": "Trailers",
"language": "English"
},
{
"filmId": 9,
"title": "ALABAMA DEVIL",
"description": "A Thoughtful Panorama of a Database Administrator And a Mad Scientist who must Outgun a Mad Scientist in A Jet Boat",
"releaseYear": "2006",
"rating": "PG-13",
"specialFeatures": "Trailers,Deleted Scenes",
"language": "English"
},
{
"filmId": 10,
"title": "ALADDIN CALENDAR",
"description": "A Action-Packed Tale of a Man And a Lumberjack who must Reach a Feminist in Ancient China",
"releaseYear": "2006",
"rating": "NC-17",
"specialFeatures": "Trailers,Deleted Scenes",
"language": "English"
}
]
代码是这样的-
var itemsPerPage = 10;
Ext.onReady(function () {
model = Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'title', mapping: 'title', type: 'string' },
{ name: 'decription', mapping: 'description', type: 'string' },
{ name: 'releaseYear', mapping: 'releaseYear', type: 'string' },
{ name: 'rating', mapping: 'rating', type: 'string' },
{ name: 'specialFeatures', mapping: 'specialFeatures', type: 'string' },
],
pageSize: itemsPerPage,
validators: {
username: 'presence'
},
});
var storeForGrid = Ext.create('Ext.data.Store', {
model: 'model',
pageSize: itemsPerPage,
proxy: {
type: 'ajax',
url: 'http://localhost:8080/CHECKING/displayAll',
render: {
type: 'json',
},
autoLoad: true,
}
});
storeForGrid.load({
params: {
start: 0,
limit: itemsPerPage,
foo: 'bar'
}
});
let gridPanel = Ext.create('Ext.grid.Panel', {
title: 'Movie Grid',
store: storeForGrid,
selModel: {
checkOnly: false,
injectCheckbox: 'first',
mode: 'SIMPLE'
},
selType: 'checkboxmodel',
columns: [
{
text: 'Title',
dataIndex: 'title',
flex: 1
},
{
text: 'Description',
dataIndex: 'description',
flex: 1
},
{
text: 'Release Year',
dataIndex: 'releaseYear',
flex: 1
},
{
text: 'Language',
dataIndex: 'language',
flex: 1
},
{
text: 'Rating',
dataIndex: 'rating',
flex: 1
},
{
text: 'Special Feature',
dataIndex: 'specialFeatures',
flex: 1
}
],
bbar: {
xtype: 'pagingtoolbar',
displayInfo: true
},
width: '100%'
});
var mainBody = Ext.create('Ext.container.Viewport', {
margin: 0,
items: [gridPanel],
renderTo: Ext.getBody(),
})
})
2条答案
按热度按时间j5fpnvbx1#
1.如果结果直接出现在响应正文中,则不必设置
rootProperty
。1.虽然您不必这样做,但我建议您为页面工具栏设置与网格相同的存储,例如:
1.但如果没有后端关于记录总数的信息,分页将无法工作。工具栏将尝试显示,例如,在可能的100条记录中,您位于第3页,为此,您需要总记录数。
totalProperty
的值默认为total
,这在您的响应中不存在,这就是禁用分页控件的原因。eivgtgni2#
如Peter所述,您必须发送总密钥:
在上面的示例中,rootProperty在存储代理读取器中应该是
data