sencha touch 2.2 list PullRefresh插件没有refreshFn方法
但是我们又需要他,所以需要自行扩展
代码如下
1 /** 2 * 重写下拉刷新插件,以支持refreshFn事件 3 */ 4 Ext.define('ux.plugin.RefreshFn', { 5 extend: 'Ext.plugin.PullRefresh', 6 alias: 'plugin.refreshFn', 7 requires: ['Ext.DateExtras'], 8 xtype:'refreshFn', 9 config: { 10 /** 11 *@ CFG {功能} refreshFn函数将被调用以刷新列表。 12 *如果没有定义,store里的函数将被调用。 13 */ 14 refreshFn: null, 15 lastUpdatedText: '上次刷新时间:', 16 loadingText: '加载中...', 17 pullRefreshText: '下拉可以手动刷新', 18 releaseRefreshText: '松开可以刷新', 19 lastUpdatedDateFormat: 'Y-m-d H:i' 20 }, 21 22 loadStore: function () { 23 var me = this, 24 list = me.getList(), 25 scroller = list.getScrollable().getScroller(); 26 me.setViewState('loading'); 27 me.isReleased = false; 28 Ext.defer(function () { 29 scroller.on({ 30 scrollend: function () { 31 if (me.getRefreshFn()) { 32 me.getRefreshFn().call(me, me); 33 } else { 34 me.fetchLatest(); 35 } 36 me.resetRefreshState(); 37 }, 38 delay: 100, 39 single: true, 40 scope: me 41 }); 42 scroller.minPosition.y = 0; 43 scroller.scrollTo(null, 0, true); 44 }, 45 500, me); 46 } 47 });
用法:
1 Ext.define('app.view.list.Xml', { 2 alternateClassName: 'listXml', 3 extend: 'Ext.List', 4 requires: ['ux.plugin.RefreshFn'], 5 xtype: 'listXml', 6 config: { 7 title: 'Xml取值', 8 itemTpl: '{title}', 9 plugins: [{ 10 xtype: 'refreshFn', 11 refreshFn: function (loaded, arguments) { 12 //开始刷新触发的时间,默认效果是只刷新第一页数据。不管后面显示了多少数据 13 //这里进行了处理,触发时清空所有数据,重新加载第一页数据。 14 loaded.getList().getStore().loadPage(1); 15 } 16 }], 17 store: 'blogList' 18 } 19 });