Javascript ExtJS 4.1.1无限滚动仅加载第一页
我想要一个带有extjs4和c#后端的无限滚动网格。。。我正在控制器中设置代理api 我的模型:Javascript ExtJS 4.1.1无限滚动仅加载第一页,javascript,extjs,extjs4.1,infinite-scroll,Javascript,Extjs,Extjs4.1,Infinite Scroll,我想要一个带有extjs4和c#后端的无限滚动网格。。。我正在控制器中设置代理api 我的模型: Ext.define('appname.model.training.course.TrainingRequirementList', { extend: 'Ext.data.Model', idProperty: 'ID', fields: [ { name: 'ID', type: 'int', convert: null }, { nam
Ext.define('appname.model.training.course.TrainingRequirementList', {
extend: 'Ext.data.Model',
idProperty: 'ID',
fields: [
{ name: 'ID', type: 'int', convert: null },
{ name: 'EmployeeName', type: 'string' },
{ name: 'Description', type: 'string' },
{ name: 'StatusText', type: 'string' },
{ name: 'Status', type: 'int' },
{ name: 'Priority', type: 'string' },
{ name: 'Date', type: 'string' },
{ name: 'Cost', type: 'string' },
{ name: 'CanApprove', type: 'bool' },
{ name: 'CanRequest', type: 'bool' },
{ name: 'ConfirmStatus', type: 'string' },
{ name: 'PlanId', type: 'int'}
]
});
我的网格:
{
xtype: 'gridpanel',
flex: 1,
padding: '0 10 10 10',
minHeight: 200,
verticalScroller: {
xtype: 'paginggridscroller'
},
store: {
model: 'appname.model.training.course.TrainingRequirementList',
pageSize: 200,
autoLoad: true,
buffered: true,
remoteSort: true,
sorters: {
property: 'Date',
direction: 'DESC'
},
proxy: {
type: 'direct',
extraParams: {
total: 50000
},
reader: {
type: 'json',
root: 'ID',
totalProperty: 'TotalCount'
},
simpleSortMode: true
}
},
columns:
[{
text: Lang.Main.Employeee,
dataIndex: 'EmployeeName',
flex: 1,
filterable: true
},
{
text: Lang.Main.Course,
dataIndex: 'Description',
flex: 1,
filterable: true
},
{
text: Lang.Main.Status,
dataIndex: 'StatusText',
flex: 1,
filterable: true
},
{
text: Lang.Main.Priority,
dataIndex: 'Priority',
flex: 1
},
{
text: Lang.Main.Date,
dataIndex: 'Date',
flex: 1
},
{
text: Lang.Main.Cost,
dataIndex: 'Cost',
flex: 1,
filterable: true
},
{
text: Lang.Main.Actions,
flex: 1,
align: 'center',
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'Design/icons/cog_edit.png',
tooltip: Lang.Main.Open,
handler: function (grid, rowIndex, colIndex, item) {
this.onGridOpen(grid.getStore().getAt(rowIndex));
}
}]
}],
selModel: { mode: 'MULTI', selType: 'checkboxmodel' },
}
在controoler中设置代理:
view.grid.getStore().setProxy({
type: 'direct',
model: 'appname.model.training.course.TrainingRequirementList',
api: { read: SCT.Service.Training.Plan.GetFilteredRequirements },
extraParams: { total: 50000 },
reader: {
type: 'json',
root: 'ID',
totalProperty: 'TotalCount'
},
simpleSortMode: true
});
有关我的观点的其他信息:
Ext.define('appname.view.training.course.TrainingRequirements',
{
extend: 'Ext.panel.Panel',
require: [ 'Ext.grid.PagingScroller'],
我的网格仅加载前200行,滚动条的大小仅与200行的滚动条一样大
服务器响应包含以下条目:
{"ID":99,"PlanId":23,"firstname":"name","lastname":"name","Comment":"","Status":3,"ConfirmType":0,"Priority":"entry","DesiredDate":null,"StartDate":new Date(1354107600000),"ActualCost":180,"EstimatedCost":0,"row":201,"TotalCount":8568,"EmployeeName":"some, name","Description":"","StatusText":"state","Date":"28.11.2012","Cost":"EUR 180"}
我错过了什么
更新
当我向下滚动时,脚本也会加载第二页。。还是没什么
如果您需要更多信息,请毫不犹豫地询问您的服务器是否在响应中包含正确的
TotalCount
值
编辑:
根据您的读者配置,您的服务器应该用这种格式的数据进行应答(当然,您的应答也应该是有效的JSON,这里使用Javascript进行说明):
在您的情况下,您的TotalCount
似乎混合在每个项目数据中
关于服务器端的实现,您是对的:它应该只是记录的总数,所以类似于数据库中的COUNT(*)
还有一件事:
新日期(1354107600000)
不是有效的JSON。一旦JSON被解码,您应该使用字符串并将其转换为日期。例如,在您的模型中,您可以将字段类型配置为Ext处理:{name:'Date',type:'Date',format:'d.m.Y'}
,因为您可以看到TotalCount
响应是8568,这是正确的数字。我的TotalCount只是sql中所有行的一个计数,如下所示:count(*)over()作为TotalCount,我这样做是否正确?我向下滚动时,我刚刚看到他也在加载第二页。。但仍然不是所有条目..:/抱歉,我没有看到它,因为我假设您显示的数据仅用于一条记录。您的答复格式似乎有一些问题。我正在更新我的答案来解释。非常感谢。似乎我不明白数据集是什么样子的。我会尝试一下,然后回复你
{
// total property at the root level of response object
TotalCount: 8568,
// root for items data, configured as "ID" in your reader (you should probably
// change that to something like "records" or "data" to better express meaning)
ID: [
// individual fields data
{ID: 1, EmployeeName: 'Foo', ...},
{ID: 2, EmployeeName: 'Bar', ...},
...
]
// if you had, for example, a successProperty, it would go here too
,success: true
}