How to add a custom update on a pull refresh?

Question

In the standard "Pull to Refresh" plugin, the list store gets updated. However, I have two lists and I need to update a different store for my detail list. How can I override the update event and reload my other store? I tried adding a simple listener but it's not firing.

[Update]

I got this snippet from the Sencha site to work:

plugins: [
          {
             xclass: 'Ext.plugin.PullRefresh',
              pullRefreshText: 'Pull down for more new Events!',
              refreshFn: function(plugin) {
                  console.log( "I'm pulled" );
              }
           }
          ]

Original code:

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

    }
});

Stephen Sweriduk · Answer 1 · 2013-06-03T16:45:59.833

In Sencha Touch 2.2, they have removed the refreshFn config from Ext.util.PullRefresh. I have successfully implemented a custom refreshFn with the new version of Sencha Touch by overriding the fetchLatest function inside Ext.util.PullRefresh like so...

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
    }
});

score 2 · Accepted Answer · answered May 19 '12 at 02:52

2

Having a look at Ext.plugin.PullRefresh definition in sencha-touch-all-debug, I see this 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.
     * The refresh function gets called with a reference to this plugin instance.
     * @accessor
     */
    refreshFn: null,

It might be a good idea that you can achieve what you need through refreshFn config.

answered May 19 '12 at 02:52

Thiem Nguyen

6,345
7
30
50

I did see that. I tried adding one with a console.log instead of my listener but nothing appeared in my log. I'll update my question with what I did. – May 19 '12 at 10:44
2

Seems this is the answer. Not sure why my original attempt did not work. Thanks. – May 21 '12 at 17:46

score 1 · Answer 3 · answered Oct 03 '14 at 05:44

For those who need the refreshFn back, there is a PullRefreshFn extension for PullRefresh.

I needed PullRefresh to get triggered by a Panel, rather than a List or Dataview and I also needed to manually load and set data to my Dataview upon user triggering the PullRefresh.

For this I needed the refreshFn config function that existed prior to Sencha 2.2, so here is my implementation.

PullRefreshFn (Modified)

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);
        }
    }

});

My Controller

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);
                });
            }
        }]);
    }

});

Thanks for this answer :) – Chandrashekhar May 13 '16 at 16:06 — Chandrashekhar, May 13 '16 at 16:06

How to add a custom update on a pull refresh?

3 Answers3