【发布时间】:2012-02-27 17:12:47
【问题描述】:
在 ExtJS 4.1 beta 2 中,我设法实现了一个带有远程存储的无限滚动网格。我基本上采用了一个现有的(完全可操作的)分页网格(带有远程存储、过滤和排序),然后放入适当的配置以进行无限滚动:
// Use a PagingGridScroller (this is interchangeable with a PagingToolbar)
verticalScrollerType: 'paginggridscroller',
// do not reset the scrollbar when the view refreshs
invalidateScrollerOnRefresh: false,
// infinite scrolling does not support selection
disableSelection: true,
docs 中的任何地方都没有这样说(请参阅无限滚动部分),但您需要将您的商店设置为具有 buffered: true 配置。而且你不能用store.load() 加载它需要这样做:
store.prefetch({
start: 0,
limit: 200,
callback: function() {
store.guaranteeRange(0, 99);
}
});
尽管如此,如果我慢慢滚动并允许数据预取,不使用任何过滤器,也不使用任何排序,一切都会很好。
但是,如果我快速滚动或尝试在激活过滤器的情况下重新加载无限滚动网格,或者在排序时,它会全部分解。错误是options is undefined。
我花了几个小时在代码中进行一些跟踪和谷歌搜索,除了得出没有人使用远程过滤器和远程滚动实现无限滚动网格的结论之外,我发现了以下内容:
由于Ext.data.Store 中的这个方法,当它需要来自服务器的更多数据时,无限滚动器会调用该方法:
mask: function() {
this.masked = true;
this.fireEvent('beforeload');
},
由于某种原因,此方法会触发beforeload 事件没有 Ext.data.Operation 参数应该是它的一部分,如指定的here。
因此,Ext.ux.grid.FiltersFeature 中的 onbeforeload 处理程序发生错误,因为“选项”当然是未定义的:
/**
* @private
* Handler for store's beforeload event when configured for remote filtering
* @param {Object} store
* @param {Object} options
*/
onBeforeLoad : function (store, options) {
options.params = options.params || {};
this.cleanParams(options.params);
var params = this.buildQuery(this.getFilterData());
Ext.apply(options.params, params);
},
我可以从 PagingScroller 代码中删除对 mask 方法的调用,然后滚动功能就很棒了。我可以随心所欲地滚动并正确加载数据。 但是然后过滤器和排序不会应用于 ajax 请求。
我没有深入研究排序方面,但我认为它与 mask 方法类似,因为 sort 只是 operation 对象包含的另一个元素,它会导致 no要传递给ajax请求的操作对象。
我在想,如果我能弄清楚如何使用operation 参数(就像文档所说的那样)强制mask 方法触发beforeload,一切都会好起来的。问题是,我无法弄清楚如何做到这一点。有什么建议吗?
如果有人只是告诉我我错了并且人们实际上已经完成了这项工作,我会受到启发,但是非常感谢您用来处理此问题的任何覆盖或链接的 sn-p。
我也尝试过降级到 4.0.7 和 4.0.2a,我得到了相同的结果,所以这不仅仅是一个 beta 问题。
更新 - 12 年 2 月 7 日:
这似乎实际上可能是Ext.ux.grid.FilterFeature 问题而不是无限滚动问题。如果我完全删除 FilterFeature 配置,则无限滚动效果很好,并且当我按列排序时确实将排序参数传递给我的后端。我将开始研究 FilterFeature 的结果。
【问题讨论】:
标签: javascript extjs extjs4 filtering dom-events