How to add a custom update on a pull refresh? - sencha-touch-2

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

Answer 1

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

Answer 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.

Answer 3

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