2
我已经基于Sencha给出的示例实现了无限网格。基本上，代理使用jsonp获取json文件并填充网格。我希望网格大小为10，我希望代理仅在用户向下滚动至第10条记录时才发出后续请求。每个记录在网格视图中垂直放置足够的空间，只有约5条记录可以不滚动（在我的14英寸笔记本电脑上，分辨率为1366 x 768）。我已经将pagesize设置为10，我的期望是，只有当我向下滚动到可见记录之外时，才会刷新网格。但是，即使没有滚动，网格也会加载所有数据（共50条记录），并提供5个单独的请求。下面的代码：ExtJS Grid呈现比页面中指定的更多的行
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
不知道为什么你需要使用这个bufferedrenderer插件？如果您在此处查看示例 - http://docs.sencha.com/ext-js/4-1/#!/example/grid/infinite-scroll-with-filter。HTML或这里 - http://docs.sencha.com/ext-js/4-2/#!/example/grid/infinite-scroll-with-filter.html这样的插件尚未使用。您的观点是否经常调整大小？ – netemp 2013-04-02 07:57:41
我使用它，因为这是4.2中如何实现无限网格。您共享的第二个链接使用缓冲的渲染器插件。 不，我的视图不会经常手动调整大小，但我猜每次刷新视图时都会计算视图大小，这会在用户上下滚动时频繁发生。 – Prathap 2013-04-03 09:13:41
不知道我们是否在同一页面上，因为当我在http://docs.sencha.com/ext-js/4-2/extjs-build/examples/grid/infinite查看JS文件的代码时-scroll-with-filter.js - 我发现这个插件只通过'require'被包含，但它没有在网格对象中使用ptype进行配置。 – netemp 2013-04-04 17:09:28