行编辑插件上的 Extjs4 无限滚动分页
Posted
技术标签:
【中文标题】行编辑插件上的 Extjs4 无限滚动分页【英文标题】:Extjs4 infinite scroll pagination on rowediting plugin 【发布时间】:2012-05-21 22:54:06 【问题描述】:我正在尝试让无限滚动工作,并浏览了相关的博客和帖子,但无法弄清楚为什么当我的垂直滚动条到达 numfromedge 时它不会向服务器发出任何请求?
我是否正确理解这一点,当垂直滚动条到达 numfromedge 时,商店将向服务器发起请求?这意味着在服务器端我们必须管理查询和页面返回? 还是我一次从服务器返回所有记录?因为如果我将leadingBufferedZone 设置为 100 并将 purgePageCount 设置为 0 那么大约有 7 个请求向服务器发出每个大小为 50 的请求?但在这种情况下,正如您所见,这不会发生在 numfromedge 上,而是发生在开头......
我的网格
Ext.define('AM.Something',
extend : 'Ext.grid.Panel',
alias : 'widget.something',
title : 'something',
store : 'somethingStore',
verticalScroller:
numFromEdge: 10,
trailingBufferZone: 10,
leadingBufferZone: 10
,
verticalScrollerType: 'paginggridscroller',
invalidateScrollerOnRefresh: false,
disableSelection:true,
selType : 'rowmodel',
features : [ somefiltering],
plugins : // Row editing plugin ....
我的商店
Ext.define('AM.somethingStore',
extend: 'Ext.data.Store',
model: 'AM.somethingModel',
autoLoad : true,
autoSync: true,
// remoteSort:true,
buffered : true,
// leadingBufferedZone:100,
// purgePageCount:0,
pageSize:50,
proxy:
type: 'ajax',
api :
read : 'something/fetch',
update:'something/update',
create :'something/create',
destroy : 'something/delete'
,
reader :
type : 'json',
root : 'someList.content', // an array of rows for the grid
successProperty : 'success',
idProperty : 'id',
totalProperty: 'total'
,
writer :
type : 'json',
allowSingle : true
我在后端使用 spring-data 和 spring 控制器
@RequestMapping(value = "/something/fetch", method = RequestMethod.GET)
public @ResponseBody
Map<String, ? extends Object> fetchPricing(@RequestParam Integer page, @RequestParam Integer limit )
Page<Somethings> someList= someService.fetchSomething(page-1,limit);
Map<String, Object> responseMap = new HashMap<String, Object>();
responseMap.put("success", true);
responseMap.put("someList", someList);
return responseMap;
我期望当滚动条到达网格中显示的最后一条记录的 10 以内时,商店会向服务器发送请求 page2 和页面大小限制..
有没有配置错误?
提前致谢
【问题讨论】:
【参考方案1】:商店
//autoLoad : true,
autoSync: true,
//remoteSort:true,
remoteFilter:true,
buffered : true,
leadingBufferedZone:200,
purgePageCount:0,
pageSize:50
网格
verticalScroller:
numFromEdge: 10,
trailingBufferZone: 10,
leadingBufferZone: 10
,
verticalScrollerType: 'paginggridscroller',
invalidateScrollerOnRefresh: false,
disableSelection:true,
【讨论】:
以上是关于行编辑插件上的 Extjs4 无限滚动分页的主要内容,如果未能解决你的问题,请参考以下文章