我已经根据Sencha给出的示例实现了一个无限网格。基本上,代理使用jsonp获取json文件并填充网格。我希望网格大小为10,并且我希望代理仅在用户向下滚动到第10条记录时才发出后续请求。每个记录在网格视图中垂直占用足够的空间,只有大约5条记录可以看到而无需滚动(在我的14英寸笔记本电脑上,分辨率为1366 x 768)。我已经将pagesize设置为10,我的期望是只有当我向下滚动到可见记录之外时网格才会刷新。但是,即使没有滚动,网格也会通过发出5个单独的请求来加载所有数据(总共50条记录)。这是代码:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer'
]);
Ext.onReady(function() {
Ext.define('ContentModel', {
extend : 'Ext.data.Model',
fields : [ 'content_id', 'content' ],
idProperty: 'content_id'
});
var store = Ext.create('Ext.data.Store', {
id : 'store',
model : 'ContentModel',
buffered: true,
pageSize: 10,
proxy : {
type : 'jsonp',
url : 'http://website.com/Top1.json',
reader: {
root: 'contents',
totalProperty: 'totalCount'
}
},
autoLoad : true
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo : Ext.getBody(),
width : '100%',
height : '100%',
title : 'Reader Panel',
id : 'reader',
store : store,
columns : [ {
id : 'content_id',
text : 'Content ID',
dataIndex : 'content_id',
width : '10%'
},
{
id : 'content',
text : 'Content',
dataIndex : 'content',
width : '90%'
} ]
});
Ext.define('JSONP Proxy', {
override: 'Ext.data.proxy.JsonP',
buildUrl: function(request) {
var me = this, url = this.getUrl(request);
console.log(url);
request.url = 'http://website.com/Top' + request.params.page + '.json';
return me.callParent([request]);
}
});
});
json文件的内容是:
Top1.json:
Ext.data.JsonP.callback1({"totalCount":"50", "contents":[{"content_id" : 1, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 2, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 3, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 4, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 5, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 6, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 7, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 8, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 9, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 10, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"}]});
其他json文件采用相同的格式,具有唯一的内容ID,并具有正确的回调(callback2,callback3,callback4和callback5)。
有人可以告诉我为什么所有5个jsonp请求都会立即被解雇,而不是等待我滚动?
谢谢, Prathap
答案 0 :(得分:2)
感谢大家指点我正确的方向。所以,这是最终有效的:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer'
]);
Ext.onReady(function() {
Ext.define('ContentModel', {
extend : 'Ext.data.Model',
fields : [ 'content_id', 'content' ],
idProperty: 'content_id'
});
var store = Ext.create('Ext.data.Store', {
id : 'store',
model : 'ContentModel',
buffered: true,
pageSize: 10,
trailingBufferZone: 5,
leadingBufferZone: 5,
purgePageCount: 0,
scrollToLoadBuffer: 10,
proxy : {
type : 'jsonp',
url : 'http://website.com/Top' + 0 + '.json',
reader: {
root: 'contents',
totalProperty: 'totalCount'
}
},
autoLoad : true
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo : Ext.getBody(),
width : '100%',
height : '100%',
title : 'Reader Panel',
id : 'reader',
store : store,
plugins : [{
ptype: 'bufferedrenderer',
trailingBufferZone: 5,
leadingBufferZone: 5,
scrollToLoadBuffer: 10,
onViewResize: function(view, width, height, oldWidth, oldHeight) {
// Only process first layout (the boxready event) or height resizes.
if (!oldHeight || height !== oldHeight) {
var me = this,
newViewSize,
scrollRange;
// View has rows, delete the rowHeight property to trigger a recalculation when scrollRange is calculated
if (view.all.getCount()) {
// We need to calculate the table size based upon the new viewport size and current row height
delete me.rowHeight;
}
// If no rows, continue to use the same rowHeight, and the refresh handler will call this again.
// Calculates scroll range. Also calculates rowHeight if we do not have an own rowHeight property.
// That will be the case if the view contains some rows.
scrollRange = me.getScrollHeight();
//newViewSize = Math.ceil(height / me.rowHeight) + me.trailingBufferZone + me.leadingBufferZone;
newViewSize = 18;
me.viewSize = me.setViewSize(newViewSize);
me.stretchView(view, scrollRange);
}
}
}],
columns : [ {
id : 'content_id',
text : 'Content ID',
dataIndex : 'content_id',
width : '10%'
},
{
id : 'content',
text : 'Content',
dataIndex : 'content',
width : '90%'
} ]
});
Ext.define('JSONP Proxy', {
override: 'Ext.data.proxy.JsonP',
buildUrl: function(request) {
var me = this, url = this.getUrl(request);
console.log(url);
request.url = 'http://website.com/Top' + request.params.page + '.json';
return me.callParent([request]);
}
});
});
诀窍是在商店和网格的bufferedrenderer插件中设置缓冲区设置,并覆盖插件的onViewResize方法。 bufferedrenderer的ViewSize属性是根据rowheight计算的,rowheight由于某种原因总是默认值为21,因此导致ViewSize为60,大于服务器中的记录总数(50) 。这导致立即获取所有行。一旦我将viewsize属性覆盖到18,视图大小相应地改变了,现在我第一次只获取了30条记录。按需加载也完美适用于滚动:)
答案 1 :(得分:1)
您需要为leadingBufferZone和trailingBufferZone设置正确的值才能获得正确的记录数。
答案 2 :(得分:0)
您正在使用buffered
配置。如果启用了buffered
,则默认情况下,存储会将5个页面加载到预取缓存中。要更改已完美的页面数,请使用purgePageCount config。