Ext.ux.touch.ListPullRefresh¶ ↑

This is a plugin based on enormego’s EGOTableViewPullRefresh implementation which works with Sencha Touch.

Same concept as usual - you have a list of items, and you drag the list down which reveals the ‘Pull To Refresh…’ section. Releasing the list and letting it bounce back into place will trigger a reload. Sliding the list back up past a certian point then releasing it will not cause a reload.

Resources for CSS and Images are located in the resources folder. Image URL’s in the CSS will need to be updated to suit your particular setup.

Usage¶ ↑

{
    xtype: 'list',
    ...,
    plugins: [new Ext.ux.touch.ListPullRefresh({
      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();
         }
      }
    })],
    ...
}

The ‘released’ event is fired when the user drags this list past the required distance and releases it. This will also display the ‘loading’ indicator, which will need to be removed when your done doing whatever it is you need to do by calling the plugins processComplete method.