sencha 2.3中自己定义PullRefreshFn给PullRefresh加入下拉刷新事件
2024-10-18 17:08:37
Sencha removed the refreshFn from the pullrefresh plugin in ST 2.2. Here is an user extension with gives the old
functionality back to you.
/**
* This user extension gives st 2.3.0 Pullrefresh the RefreshFn back
* based on sencha touch 2.3.0
*
* @class Ext.ux.touch.PullRefreshFn
* @version 2.0.1-beta
* @author Martin Hess <https://github.com/p5hema2>
*
* ## Example
*
* Ext.create('Ext.dataview.List', {
* fullscreen: true,
*
* store: store,
*
* plugins: [
* {
* xclass: 'Ext.ux.touch.PullRefreshFn',
* pullRefreshText: 'Pull down for more new Tweets!'
* refreshFn: function() {
* Ext.getStore('ENTER YOUR STORE HERE').load('',1)
* }
* }
* ],
*
* itemTpl: [
* 'YOUR ITEMTPL'
* ]
* });
*/
Ext.define('myapp.model.PullRefreshFn', {
extend: 'Ext.plugin.PullRefresh',
alias: 'plugin.pullrefreshfn',
requires: ['Ext.DateExtras'],
xtype:'refreshFn', config: {
/**
* @cfg {Function} refreshFn The function that will be called to refresh the list.
* If this is not defined, the store's load function will be called.
* The refresh function gets called with a reference to this plugin instance.
* @accessor
*/
refreshFn: null,
pullText: '下拉能够更新',
lastUpdatedText:"上次刷新时间",
lastUpdatedDateFormat:"Y-m-d H:i",
releaseText:"松开開始更新",
loadedText:"载入完毕"
}, fetchLatest: function() {
if (this.getRefreshFn()) {
this.getRefreshFn().call(this, this);
this.setState("loaded");
this.fireEvent('latestfetched', this, 'refreshFn, you have to handle toInsert youself');
if (this.getAutoSnapBack()) {
this.snapBack();
}
} else {
console.log('fetchLatest')
var store = this.getList().getStore(),
proxy = store.getProxy(),
operation; operation = Ext.create('Ext.data.Operation', {
page: 1,
start: 0,
model: store.getModel(),
limit: store.getPageSize(),
action: 'read',
sorters: store.getSorters(),
filters: store.getRemoteFilter() ? store.getFilters() : []
}); proxy.read(operation, this.onLatestFetched, this);
}
}, /**
* Snaps the List back to the top after a pullrefresh is complete
* @param {Boolean=} force Force the snapback to occur regardless of state {optional}
*/
snapBack: function(force) {
if(this.getState() !== "loaded" && force !== true) return; var that = this,
list = this.getList(),
scroller = list.getScrollable().getScroller(),
currentY = scroller.minPosition.y; scroller.refresh();
scroller.minPosition.y = 0; scroller.on({
scrollend: this.onSnapBackEnd,
single: true,
scope: this
}); this.setIsSnappingBack(true); scroller.getTranslatable().translateAnimated(0, currentY, {duration: this.getSnappingAnimationDuration()});
setTimeout(
function () {
scroller.scrollTo(0,1);
scroller.scrollToTop();
},
that.getSnappingAnimationDuration()
); }
});
最新文章
- 拓扑排序(topsort)
- Func<;T,TResult>;泛型委托
- iOS应用架构谈(一):架构设计的方法论
- LeetCode 笔记23 Best Time to Buy and Sell Stock III
- HTML文件结构
- Laravel中URL,ACTION,ROUTE区别
- 图片原理解说(综合版:JPEG,PNG,BMP,GIF)
- PSP编程初探 Hello World
- Visual Studio快速封装字段方法
- js验证是否是数字,支持正负数小数
- Android TextView常用属性
- MAC 调用GCC 提示xcrun: error: invalid active developer path
- C. Playing Piano 动态规划
- MySQL开发——【字段类型、约束】
- LeetCode算法题(长期更新)
- Java - 34 Java 文档注释
- Netty 源码 Channel(二)主要类
- 简明 MongoDB 入门教程
- 微信小程序 - 上传图片组件
- memcache使用方法测试
热门文章
- css 画图形大全
- iTem2 保持连接,解决ssh的";Write failed: Broken pipe";问题
- react组件(react-grid-gallery)
- C# 生成缩略图 去除图片旋转角度
- Material适配2 - 高级篇
- 【java8】慎用java8的foreach循环(作废)
- LeetCode 之二叉树中序遍历(使用栈实现)
- MySQL 、SQL MS Access、和 SQL Server 数据类型
- 6.servlet和jsp的区别
- C# DataGridview用NPOI导出Excel文件