sencha 2.3中自己定义PullRefreshFn给PullRefresh加入下拉刷新事件
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()
); }
});
sencha 2.3中自己定义PullRefreshFn给PullRefresh加入下拉刷新事件的更多相关文章
- android--------自定义控件ListView实现下拉刷新和上拉加载
开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,为了方便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能. Android下拉刷新可以分为两种情况: 1.获取 ...
- 【Android-自定义控件】SwipeRefreshDemo 下拉刷新,上拉加载
参考:https://github.com/PingerOne/SwipeRefreshDemo 谷歌官方的SwipeRefreshLayout控件,只有下拉刷新功能. 自定义的SwipeRefres ...
- 【转载】Android中ListView下拉刷新的实现
在网上看到一个下拉刷新的例子,很的很棒,转载和更多的人分享学习 原文:http://blog.csdn.net/loongggdroid/article/details/9385535 ListVie ...
- Android中ListView下拉刷新的实现
ListView中的下拉刷新是非常常见的,也是经常使用的,看到有很多同学想要,那我就整理一下,供大家参考.那我就不解释,直接上代码了. 这里需要自己重写一下ListView,重写代码如下: packa ...
- Android 它们的定义ListView实现底部和页下拉刷新刷新的顶
在项目开发.由于数据量过大,寻呼需要加载或下拉刷新.为了缓解长期等待-time负载.这个博客的评论中被自己的定义实例ListView实现底部的下拉刷新页面正在加载结果和顶部. 其效果图: 一.List ...
- Android-自定义ListView下拉刷新与上拉加载
效果图: 第一步:编写需要在ListView中增加头加载的布局文件,与底部加载的布局文件: 头布局文件: <?xml version="1.0" encoding=" ...
- Android中实现下拉刷新
需求:项目中的消息列表界面要求实现类似sina微博的下拉刷新: 思路:一般的消息列表为ListView类型,将list加载到adapter中,再将adapter加载到 ListView中,从而实现消息 ...
- Android自己定义控件--下拉刷新的实现
我们在使用ListView的时候.非常多情况下须要用到下拉刷新的功能.为了了解下拉刷新的底层实现原理,我採用自己定义ListView控件的方式来实现效果. 实现的基本原理是:自己定义ListView, ...
- SuperSwipeRefreshLayout 一个功能强大的自己定义下拉刷新组件
SuperSwipeRefreshLayout 一个功能强大的自己定义下拉刷新组件. Why? 下拉刷新这样的控件.想必大家用的太多了,比方使用非常多的XListView等. 近期.项目中非常多列表都 ...
随机推荐
- JAVA视频网盘分享
JAVA视频网盘分享 [涵盖从java入门到深入架构,Linux.云计算.分布式.大数据Hadoop.ios.Android.互联网技术应有尽有] 1.JavaScript视频教程 链接: http: ...
- hihocoder [Offer收割]编程练习赛12 [1494] ---- 一面砖墙
原题链接 一面砖墙 算法分析 设墙的宽度为 range,则需要统计横坐标为 1,2,3,4,...,range-1 处的墙缝数,取最大的墙缝数(记为maxCrevices),从该处划一道竖线,竖线穿过 ...
- CentOS7系列--5.3CentOS7中配置和管理Kubernetes
CentOS7配置和管理Kubernetes Kubernetes(k8s)是自动化容器操作的开源平台,这些操作包括部署,调度和节点集群间扩展.如果你曾经用过Docker容器技术部署容器,那么可以将D ...
- WebGIS点要素渲染性能测试
$('#stationQuery').bind('click', function(){ var drawStyle = $.extend( { }, map.geomap( "option ...
- cnpm 淘宝镜像设置
很简单,一句话 npm install -g cnpm --registry=https://registry.npm.taobao.org
- MQTT介绍(1)简单介绍
MQTT目录: MQTT简单介绍 window安装MQTT服务器和client java模拟MQTT的发布,订阅 MQTT: MQTT(Message Queuing Telemetry Transp ...
- Nginx 配置多站点vhost
假设你想在Linux Nginx中用不同的域名访问不同的目录,这时就要配置多个vhost,具体配置如下,假设网站根目录设定在/var/www/ 1.在/var/www/下新建两个目录 /var/www ...
- 聊一聊数组的map、reduce、foreach等方法
聊聊数组遍历方法 JS 数组的遍历方法有好几个: every some filter foreach map reduce 接下来我们来一个个地交流下. every() arr.every(callb ...
- 使用Docker构建AspNetCore应用
#Build Image Stage FROM microsoft/aspnetcore-build:2 AS build-env WORKDIR /api # 以下为优化还原,因为项目文件不常变动D ...
- oracle 启动报错ORA-27125解决方案
脚本: oracle@edwdb:~> id uid=(oracle) gid=(oinstall) (oinstall),(dba) oracle@edwdb:~> su - root ...