List的PullRefresh插件无法处理ChainedStore的可能性

问题描述 投票:0回答:1

使用Ext JS 7.1 Modern,我准备了一个示例来说明问题。

[当我在主存储上有远程过滤器时,将dataview.List绑定到ChainedStore会正确处理我的本地过滤。但是,当我还将PullRefresh插件添加到列表中时,在刷新时也会收到错误消息。我从源代码中看到,该插件没有考虑列表存储可以为ChainedStore的可能性。

[我试图用Sencha Fiddle解释问题,并在下面附加了代码。

我已经通过重写fetchLatest插件的onLatestFetchedExt.dataview.pullrefresh.PullRefresh方法暂时解决了该问题,如果列表的存储为source,则可以使用ChainedStore存储。但是我认为必须更新源代码才能处理这种情况。

app.js

Ext.define('App.model.Test', {
    extend: 'Ext.data.Model',

    fields: ['id', 'firstName', 'lastName']
});

Ext.define('App.store.Test', {
    extend: 'Ext.data.Store',
    alias: 'store.teststore',

    model: 'App.model.Test'
});

Ext.define('App.viewmodel.Test', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.test',
    data: {
        query: ''
    },
    stores: {
        test: {
            type: 'teststore',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'names.json',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            },

            remoteFilter: true,
            filters: {
                property: 'id',
                value: 1
            }
        },
        chained: {
            type: 'chained',

            autoLoad: true,
            source: '{test}'
        }
    }
});

Ext.define('App.controller.TestController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.testcontroller',

    doSearch: function (field) {
        var list = this.lookup('list'),
            store = list.getStore(),
            value = field.getValue();

        if (Ext.isEmpty(value)) {
            store.removeFilter('firstName')
        } else {
            store.filter([{
                property: 'firstName',
                value: value,
                operator: 'like'
            }])
        }
    }
});

Ext.define('App.dataview.TestList', {
    extend: 'Ext.dataview.List',
    xtype: 'testlist',

    viewModel: {
        type: 'test'
    },

    plugins: [{
        type: 'pullrefresh',
        mergeData: false
    }],

    emptyText: 'Name not found',
    bind: {
        store: '{chained}'
    },
    itemTpl: '<div class="contact">{id} <b>{firstName} {lastName}</b></div>'
});

Ext.define('App.MainView', {
    extend: 'Ext.Panel',
    controller: 'testcontroller',
    fullscreen: true,

    viewModel: {
        type: 'test'
    },

    items: [{
        xtype: 'searchfield',
        ui: 'solo',
        placeholder: 'Search names',
        listeners: {
            buffer: 500,
            change: 'doSearch'
        },
        bind: {
            value: '{query}'
        }
    }, {
        reference: 'list',
        xtype: 'testlist'
    }]

})

Ext.application({
    name: 'App',

    mainView: 'App.MainView'
});

names.json

var data = [{
    id: 1,
    firstName: 'Peter',
    lastName: 'Venkman'
}, {
    id: 2,
    firstName: 'Raymond',
    lastName: 'Stantz'
}, {
    id: 3,
    firstName: 'Egon',
    lastName: 'Spengler'
}, {
    id: 4,
    firstName: 'Winston',
    lastName: 'Zeddemore'
}]

var results = data.filter(function(record) {
    if (params.filter) {
        return record.id > params.filter[0].value
    }
})

return {
    "success": true,
    "data": results
}

App.override.dataview.pullrefresh.PullRefresh:

Ext.define('App.override.dataview.pullrefresh.PullRefresh', {
  override: 'Ext.dataview.pullrefresh.PullRefresh',

  privates: {
    fetchLatest: function() {
      const store = this.getStore().isChainedStore ? this.getStore().getSource() : this.getStore()
      store.fetch({
          page: 1,
          start: 0,
          callback: this.onLatestFetched,
          scope: this
      });
    },

    onLatestFetched: function(newRecords, operation, success) {
      var me = this,
          list = me.getList(),
          store = list.getStore().isChainedStore ? list.getStore().getSource() : list.getStore(),
          length, toInsert,
          oldRecords, newRecord, oldRecord, i;

      if (success) {
          if (me.getMergeData()) {
              oldRecords = store.getData();
              toInsert = [];
              length = newRecords.length;

              for (i = 0; i < length; i++) {
                  newRecord = newRecords[i];
                  oldRecord = oldRecords.getByKey(newRecord.getId());

                  if (oldRecord) {
                      oldRecord.set(newRecord.getData());
                  }
                  else {
                      toInsert.push(newRecord);
                  }
              }

              store.insert(0, toInsert);
          }
          else {
              store.loadRecords(newRecords);
          }

          me.setLastUpdated(new Date());
      }

      me.setState('loaded');
      list.fireEvent('latestfetched', me, toInsert || newRecords);

      if (me.getAutoSnapBack()) {
          me.snapBack(true);
      }
    }
  }
})

提前感谢

extjs extjs-stores extjs7
1个回答
0
投票

由于此帖子不是一个问题,而是一个可能的解决方案的错误报告,因此已发布到Ext JS 7.x Community Forums\Ext JS 7.x Bugs

以上解决方案覆盖了需要源存储的插件,如果有人遇到相同问题,则可以使用。

© www.soinside.com 2019 - 2024. All rights reserved.