Sencha touch 2 如何在拉刷新时添加自定义更新？

在标准的“Pull to Refresh”插件中，列表存储得到更新。但是，我有两个列表，我需要为我的详细列表更新一个不同的存储。如何覆盖更新事件并重新加载其他存储？我尝试添加一个简单的侦听器，但它没有启动

[更新]

我从《工作指南》中得到了以下片段：

插件：[ { xclass:'Ext.plugin.PullRefresh'， pullRefreshText:'下拉以获取更多新事件！'， refreshFn：函数（插件）{ log（“我被拉了”）； } } ] 原始代码：

Ext.define('SenchaFiddle.view.ListView', { extend: 'Ext.dataview.List', xtype: 'main-list', config: { plugins: [ 'pullrefresh', { pullRefreshText: 'Do it!', type: 'listpaging', // Don't offer "Load More" msg autoPaging: false, refreshFn: function() { console.log("Boom"); }, listeners: { 'updatedata': function(plugin, list) { console.log("Getting the data"); } } } ], layout: 'fit', width: 300, itemTpl: '{text}' } }); Ext.define（'senchabiddle.view.ListView'{ 扩展：“Ext.dataview.List”， xtype:'主列表'， 配置：{ 插件：[ “pullrefresh”， { pullRefreshText:“做吧！”， 键入：“listpaging”， //不要提供“加载更多”消息 自动老化：错误， refreshFn:function（）{ 控制台日志（“Boom”）； }, 听众：{ “updatedata”：函数（插件，列表）{ log（“获取数据”）； } } } ], 布局：“适合”， 宽度：300， itemTpl:“{text}” } });

---

查看sencha touch all debug中的

Ext.plugin.PullRefresh

定义，我看到以下配置：

    /*
     * @cfg {Function} refreshFn The function that will be called to refresh the list.
     * If this is not defined, the store's load function will be called.
     * The refresh function gets called with a reference to this plugin instance.
     * @accessor
     */
    refreshFn: null,

---

您可以通过

refreshFn

config实现所需功能，这可能是一个好主意。

在Sencha Touch 2.2中，他们已经从Ext.util.PullRefresh中删除了

refreshFn

config。通过覆盖Ext.util.PullRefresh中的

fetchLatest

函数，我成功地用新版本的Sencha Touch实现了自定义

refreshFn

Ext.define('MyApp.overrides.PullRefreshOverride', {
    override: 'Ext.plugin.PullRefresh',

    fetchLatest: function() {
        var list = this.getList();

        switch(list.getItemId()) {
            case "list1": 
                this.updateStore1();
                break;

            case "list2": 
                this.updateStore2();
                break;
        }

        this.callParent(arguments);
    },

    //My own custom function to add to the plugin
    updateStore1: function() {
        //Code to update store 1
    },

    //My own custom function to add to the plugin
    updateStore2: function {
        //Code to update store 2
    }
});

---

对于需要

refreshFn

返回的用户，有一个

PullRefresh

扩展

我需要通过面板而不是列表或数据视图来触发PullRefresh，并且我还需要在用户触发PullRefresh时手动加载数据并将其设置到我的数据视图

为此，我需要sencha2.2之前存在的

refreshFn

config函数，下面是我的实现

---

PullRefreshFn（修改）

---

我的控制器

Ext.define('myApp.controller.MyController', {
    extend: 'Ext.app.Controller',
    requires: ['Ext.plugin.PullRefreshFn'],

    ...

    // More code

    ...

    // Binds the Pull Refresh to myPanel view item.
    // myPanel is a panel. Not list nor dataview.
    setPullRefresh: function () {
        var me = this;

        // We get reference to myPanel and
        // we set PullRefreshFn
        this.getMyPanel().setPlugins([{
            xclass: 'Ext.plugin.PullRefreshFn',
            docked: 'top',

            // We set autoSnapBack to false,
            // as we are going to trigger this manually
            autoSnapBack: false,

            // refreshFn will be called upon user releasing for refresh.
            refreshFn: function() {

                // This is a custom function that sets data to our dataview list.
                // When it's done setting data, we trigger the snapBack.
                me.populateMylist(function () {
                    me.getMyPanel().getPlugins()[0].snapBack(true);
                });
            }
        }]);
    }

});

---

我确实看到了。我尝试用console.log而不是我的侦听器添加一个，但我的日志中没有显示任何内容。我会用我所做的更新我的问题。似乎这就是答案。不知道为什么我最初的尝试没有成功。谢谢。谢谢你的回答：）

Ext.define('Ext.plugin.PullRefreshFn', {
    extend: 'Ext.plugin.PullRefresh',
    alias: 'plugin.pullrefreshfn',
    requires: ['Ext.DateExtras'],

    config: {
        /**
         * @cfg {Function} refreshFn The function that will be called to refresh the list.
         * If this is not defined, the store's load function will be called.
         */
        refreshFn: null
    },

    fetchLatest: function() {
        if (this.getRefreshFn()) {
            this.getRefreshFn().call();
        } else {
            var store = this.getList().getStore(),
                proxy = store.getProxy(),
                operation;

            operation = Ext.create('Ext.data.Operation', {
                page: 1,
                start: 0,
                model: store.getModel(),
                limit: store.getPageSize(),
                action: 'read',
                sorters: store.getSorters(),
                filters: store.getRemoteFilter() ? store.getFilters() : []
            });

            proxy.read(operation, this.onLatestFetched, this);
        }
    }

});

Ext.define('myApp.controller.MyController', {
    extend: 'Ext.app.Controller',
    requires: ['Ext.plugin.PullRefreshFn'],

    ...

    // More code

    ...

    // Binds the Pull Refresh to myPanel view item.
    // myPanel is a panel. Not list nor dataview.
    setPullRefresh: function () {
        var me = this;

        // We get reference to myPanel and
        // we set PullRefreshFn
        this.getMyPanel().setPlugins([{
            xclass: 'Ext.plugin.PullRefreshFn',
            docked: 'top',

            // We set autoSnapBack to false,
            // as we are going to trigger this manually
            autoSnapBack: false,

            // refreshFn will be called upon user releasing for refresh.
            refreshFn: function() {

                // This is a custom function that sets data to our dataview list.
                // When it's done setting data, we trigger the snapBack.
                me.populateMylist(function () {
                    me.getMyPanel().getPlugins()[0].snapBack(true);
                });
            }
        }]);
    }

});