Question

我是sencha touch的新手。我有一个清单页面，它使用Ext.plugin.PullRefresh和Ext.plugin.ListPaging插件来刷新我的页面，但是我有一个问题，我拉动刷新后出现了重复的项目。

这是我的编码

〜视图

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>'


        ),



    },


});

〜商店

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'
         }



    ]
    }
});

请帮忙。感谢

Answer 1

我也遇到了这个问题。我重写了pullrefresh中的刷新功能并添加了

refreshFn(){
  Ext.getStore(storeid).load()
}

Answer 2

目前，您的商店无法在刷新时确定哪些记录是新记录。要解决此问题，您需要创建一个Ext.data.Model实例，该实例具有您的商店可以使用的已定义的idProperty。创建后，将商店的“模型”属性设置为模型的名称。然后，当您的商店刷新时，它将能够看到哪些记录实际上是新的并且只插入那些记录。

删除商店配置中的“字段”属性，并替换为：

model: 'bluebutton.model.BlueButton.MemberList'

模型样本：

Ext.define('bluebutton.model.BlueButton.MemberList', {
extend: 'Ext.data.Model',
config: {
     idProperty: 'memberId',
     fields: ['memberId', 'name','age' ,'imgUrl','address','lastVisited','pointAvalaible']
}
}

Answer 3

我和你有同样的问题。这是一个奇怪的问题，因为我的应用程序曾经工作过，有一天，它开始使用pull to refresh插件复制列表中的字段。

在数据存储中添加idProperty导致刷新在Pull to Refresh插件的onLatestFetched函数中失败。我的调查似乎表明错误的路线是：

oldRecord = oldRecords.getByKey(newRecord.getId());

newRecord.getId（）始终未定义，即使正确填充了newRecord。我通过以下方式修补此行来解决我的问题：

oldRecord = oldRecords.getByKey(newRecord.internalId;);

这对我有用。不确定这是否真的是未来的证据，也不确定它适用于所有情况，但它可以帮助你。

拉动刷新并列出列表页面上的重复记录

3 个答案: