Pull to refresh and list pagging duplicating records on listing page - sencha-touch

Question

I am new for sencha touch. I have a Listing page which using Ext.plugin.PullRefresh and Ext.plugin.ListPaging plugin to refresh my page, but I'm having an issue with duplicate items appearing after I pull to refresh.
Here is my coding
~View
Memberlist.js
Ext.define('bluebutton.view.BlueButton.MemberList', {
extend: 'Ext.List',
xtype: 'memberlistcard',
requires: [
'Ext.field.Select',
'Ext.field.Search',
'bluebutton.view.BlueButton.MemberDetail',
'Ext.plugin.ListPaging',
'Ext.plugin.PullRefresh'
],
config: {
iconCls: 'team1',
title: 'Member List',
styleHtmlContent: true,
scrollable: 'vertical',
store : { xclass : 'bluebutton.store.BlueButton.MemberList'},
grouped: true,
indexBar: true,
limit: 5,
plugins: [
{ xclass: 'Ext.plugin.ListPaging',
autoPaging: true },
{ xclass: 'Ext.plugin.PullRefresh' }
],
id :'memberlist',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'selectfield',
name: 'gender',
cls: 'txtwhite',
options: [
{ text: 'Active Member', value: 'both' },
{ text: 'Delete Member', value: 'male' },
{ text: 'Suspended Member', value: 'female' }
]
},
{ xtype: 'spacer' },
{ xtype: 'searchfield' ,
itemId:'membersearch',
id :'membersearch'
}
]
}
],
emptyText: '<p class="no-search-results">No member record found matching that search</p>',
itemTpl: Ext.create(
'Ext.XTemplate',
'<div class="tweet-wrapper">',
'<table>',
'<tr>',
'<td rowspan="2" width="1%">',
' <img src="{imgUrl}" width="170" height="170" />',
'</td>',
'<td>',
' <div class="tweet">',
' <h2>{memberId}</h2>',
' <h3>Name: {name}</h3>',
' <h3>Age : {age}</h3>',
' <h3>Address : {address}</h3>',
' <h3>Point Avalaible : {pointAvalaible}</h3>',
' <h3>Last Visited : {lastVisited}</h3>',
' </div>',
'</td>',
'</tr>',
'</table>',
'</div>'
),
},
});
~Store
Memberlist.js
Ext.define('bluebutton.store.BlueButton.MemberList', {
extend: 'Ext.data.Store',
config: {
grouper: {
groupFn: function (record) {
return record.get('name')[0];
}
},
fields: ['memberId', 'name','age' ,'imgUrl','address','lastVisited','pointAvalaible'],
pageSize: 5,
autoLoad: false,
storeId :'memberlist',
data: [{
memberId: 'Kenny',
name: 'Kenny Chow',
imgUrl: '/bluebutton/resources/images/user3.png',
age: '20',
address:'The Business Centre , 61 Wellfield Road , Roath, Cardiff, CF24 3DG',
pointAvalaible :'10',
lastVisited: '26/11/2012, 11:52 AM',
}, {
memberId: 'Anthony',
name: 'Anthony Tan',
imgUrl: '/bluebutton/resources/images/user3.png',
age: '21',
address:'3 Edgar Buildings , George Street , Bath , England , BA1 2FJ',
pointAvalaible :'44',
lastVisited: '27/11/2012, 09:52 AM'
},
{
memberId: 'Nicholas',
name: 'Nicholas Chen',
imgUrl: '/bluebutton/resources/images/user3.png',
age: '22',
address: '91 Western Road , Brighton ,East Sussex ,England ,BN1 2NW ',
pointAvalaible :'30',
lastVisited: '30/11/2012, 15:52 PM'
},
{
memberId: 'Admin2',
name: 'Admin2',
imgUrl: '/bluebutton/resources/images/user3.png',
age: '30',
address: '50 Eestern Road , Brighton ,West Sussex ,England ,BN1 34W ',
pointAvalaible :'120',
lastVisited: '01/12/2012, 15:52 PM'
},
{
memberId: 'User2',
name: 'User2',
imgUrl: '/bluebutton/resources/images/user3.png',
age: '25',
address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
pointAvalaible :'32',
lastVisited: '30/11/2012, 18:52 PM'
}
]
}
});
Please help. Thanks

Answer 1

I also faced this problem. I override the refresh function in pullrefresh and added
refreshFn(){
Ext.getStore(storeid).load()
}

Answer 2

Currently, your store has no way of determining which records are new upon refresh. To fix this, you will need to create an Ext.data.Model instance with a defined idProperty that your store can use. Once, created, set your store's 'model' property to be the name of the model. Then, when your store refreshes, it will be able to see which records are actually new and only insert those.
Remove the 'fields' property in your store config and replace with this:
model: 'bluebutton.model.BlueButton.MemberList'
Model sample:
Ext.define('bluebutton.model.BlueButton.MemberList', {
extend: 'Ext.data.Model',
config: {
idProperty: 'memberId',
fields: ['memberId', 'name','age' ,'imgUrl','address','lastVisited','pointAvalaible']
}
}

Answer 3

I have the very same issue as you. This is a strange problem though since my application used to work, and one day, it started duplicating fields in the list using the pull to refresh plugin.
Adding the idProperty in the data store caused the refresh to fail in the onLatestFetched function on the Pull to Refresh plugin. My investigation seem to indicate that the faulty line was :
oldRecord = oldRecords.getByKey(newRecord.getId());
newRecord.getId() was always undefined, even though newRecord is correctly populated.
I solved my issue by patching this line in the following way:
oldRecord = oldRecords.getByKey(newRecord.internalId;);
This worked for me. Not really sure this is really future proof nor that it works in all situation but it can help you.