0
点赞
收藏
分享

微信扫一扫

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


具体示例参见


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




举报

相关推荐

0 条评论