sencha touch 2.2 为list PullRefresh插件添加refreshFn方法

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

 

具体示例参见：http://www.cnblogs.com/mlzs/p/3382229.html

 

posted @ 2013-12-06 14:39  魔狼再世  阅读(1192)  评论(0)  编辑  收藏  举报