![](/img/trans.png)
[英]sencha touch ListPaging plugin “load more” button position issue
[英]Implement Sencha Touch ListPaging plugin
我有一个简单的Sencha Touch联系人/用户应用程序,它显示了一个列表,然后公开了更多详细信息。
我使用我们的API通过Ext.Ajax.request到达服务器,以获取用户并填充列表。 但是,totalcount通常在500以上,因此我需要实现ListPaging插件。 出于安全原因,我非常确定我不能使用“代理”方法(因为我必须使用“令牌”来认证请求)。 也许我错了; 文档很少,所以我需要加强。
我的服务器返回以下内容:
data: [,…]
hasnextpage: true
haspreviouspage: false
pageindex: 0
pagesize: 9999
success: true
totalcount: 587
totalpages: 14
我的商店:
Ext.define('MyApp.store.StudentStore',{
extend: 'Ext.data.Store',
config:{
storeId: 'Students',
model:'MyApp.model.people',
autoLoad:false,
remoteFilter:true, //just trying stuff I've read about
sortOnFilter:true,
clearOnPageLoad: false,
grouper: {
groupFn: function(record) {
return record.get('lastname')[0];
}
},
sorters: 'lastname'
}
});
和我的列表视图:
Ext.define('MyApp.view.MainPanel', {
extend: 'Ext.dataview.List',
alias : 'widget.mainPanel',
requires: [
'MyApp.store.StudentStore',
'Ext.plugin.ListPaging'
],
config: {
store : 'Students',
model: 'people',
grouped:true,
sorters: 'lastname',
itemTpl: new Ext.XTemplate(
'<tpl for=".">'+
'<h1>{firstname:ellipsis(45)} {lastname:ellipsis(45)}</h1>' +
'<h4>{grade} grade</h4>' +
'</tpl>'
),
plugins: [{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
bottom: 0,
loadMoreText: ''
}]
}
});
当屏幕滚动到底部时,我想利用ListPaging插件自动加载接下来的45个用户。 任何意见是极大的赞赏!
编辑:已解决!
@arthurakay-你是对的,我的“令牌”肯定在某个时候被破坏了。由于我的API对于每个请求都需要一个令牌,因此我能够创建一个“ beforeload”函数,在其中设置代理,我在登录时收到的令牌-需要调用ListPaging之前。 因此,在用户准备滚动并激活ListPaging时,我的令牌已与我从服务器收到的第一条记录一起存储,并且每当用户滚动到底部时,都会神奇地添加50条记录。
我真的希望这对某人有帮助!
Ext.define('MyApp.store.PersonStore',{
extend: 'Ext.data.Store',
config:{
storeId: 'Persons',
model:'MyApp.model.PersonModel',
autoLoad:false,
clearOnPageLoad: true,
listeners: {
beforeload: function(store){
store.setProxy({
headers: {
Accept : 'application/json',
Authorization : 'Bearer:' + this.token
},
type: 'ajax',
pageParam: 'pageindex',
url: this.url,
extraParams: {
count: this.count
},
reader: {
type: 'json',
rootProperty:'data',
pageParam: 'pageindex',
totalProperty: 'totalcount'
}
});
}
},
grouper: {
groupFn: function(record) {
return record.data.lastname[0]
}
},
sorters: 'lastname'
},
setParams: function(params){
for (var prop in params){
if (params.hasOwnProperty(prop)){
this[prop] = params[prop];
}
}
}
});
我在将商品添加到此处的商店时添加了“ setParams”:
var feedStore = Ext.getStore('FeedStore');
//call the setParams method that we defined in the store
feedStore.setParams({
token: TOKEN,
count: 50,
url: URL
});
您确定API文档“稀疏”吗?
http://docs.sencha.com/touch/2-1/#!/api/Ext.plugin.ListPaging
从最顶部开始:
“通过指定autoPaging:true,可以实现“无限滚动”效果,即,当用户滚动到列表底部时,将自动加载下一页内容。”
此外,使用代理与安全性有什么关系? 如果必须在每个请求中传递令牌,请使用商店代理上的“ extraParams”配置:
http://docs.sencha.com/touch/2-1/#!/api/Ext.data.proxy.Ajax-cfg-extraParams
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.