Ext.plugins.ListPagingPlugin "pullrefresh" sencha touch

2
votes

I am trying to add a listener to the following but it wont fire

plugins: [{
                ptype: 'pullrefresh',
                autoPaging: true,
                listeners: {
                     'released': function(plugin,list){
                       // call the plugins processComplete method to hide the 'loading' indicator
                      /* your_store.on('load', plugin.processComplete,     plugin, {single:true});
                       // do whatever needs to happen for reload
                       your_store.load();*/
                       alert('test');
                     }
                }
            }],

What I want to do is someone pulls the list when refresh event is fired we get users latitude and longitude and load the values into the store. My problem is the stores beforeload: event doesn't properly event bubble so its fires to store json call before it can get the users geolocation.

My Store{

listeners: {
        beforeload: function(){

            console.log( 'me1' );
            //call this to write to location services on device
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    console.log( 'me2' );
                    Rad.stores.games.getProxy().extraParams.lat  = position.coords.latitude;
                    Rad.stores.games.getProxy().extraParams.long  = position.coords.longitude;  
                }); 
            }
            console.log( 'me3' );
        }
    }
}

If you look at the console its show me1,me3, me2.... I want it to show me1,me2,me3.

I've really looked at all forums, documentation but just need some direction on setting up the listener and event bubbling i guess. Thanks you.

2
sencha-touchextjs
I'm glad you found the answer, but can you please add it as an answer (below) rather than as an edit to your question? You will be allowed to select it as correct after a waiting period and this will close out your question. Its a little odd, but that's how we do it. Thanks. - user1228

2 Answers

5
votes

Here is how you do it: refreshFn

        // pull refresh and listupdate plugins
        plugins: [
            {
                ptype: 'pullrefresh',
                refreshFn: function(callback, plugin) {
                    console.log( 'me1' );
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(function(position) {
                            console.log( 'me2' );
                            Rad.stores.games.getProxy().extraParams.lat  = position.coords.latitude;
                            Rad.stores.games.getProxy().extraParams.long  = position.coords.longitude;  
                            var store = plugin.list.getStore();
                            store.load(function(records, operation, success) {
                                callback.call(plugin);
                                console.log( 'me3' );
                            });
                        }); 
                    }
                }
            },
            {
                ptype: 'listpaging',
                autoPaging: false,  
            }
        ],

Here is the store:

  Rad.stores.games = new Ext.data.Store({
id: 'games',
model: 'games',
autoLoad:false,
    clearOnPageLoad: false, 
proxy: {
   type: 'ajax',
   url : 'ajax/lc.php',
   reader: {
        type: 'json',
        root: 'results'
   }
},
extraParams:{
    format:'json'
}

});

I am finding sencha touch doesn't have allot of working examples so I will keep posting answers to my own questions as I find them.

0
votes

I've updated this a bit to work with Sencha 2.1 and my needs

I needed to set some extraParams when the pullRefresh was fired (in my case for displaying different filters of the same feed). The above example helped, but I had to make some tweaks - this is working for me on Sencha Touch 2.1

My store is called "Questions" and I needed to set the "type" param from a variable I set when the user switches feeds (MyApp.util.Config.currentFeed). Hope this helps someone

plugins: [
{
  xclass: 'Ext.plugin.PullRefresh',
  pullRefreshText: 'Pull to refresh...',
  refreshFn: function() {
    console.log( 'firing pullrefresh event' );
    var store = Ext.getStore('Questions');
    store.getProxy().setExtraParam('type',MyApp.util.Config.currentFeed);
    Ext.Viewport.setMasked({
      xtype: 'loadmask'
    });
    store.load(function(records, operation, success) {
      console.log( 'finished pullrefresh event' );
      Ext.Viewport.setMasked(false);
    });
  }
}]