首页 > 其他 > 详细

sencha 2.3中自定义PullRefreshFn给PullRefresh添加下拉刷新事件

时间:2014-05-08 16:14:45      阅读:394      评论:0      收藏:0      [点我收藏+]

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添加下拉刷新事件,布布扣,bubuko.com

sencha 2.3中自定义PullRefreshFn给PullRefresh添加下拉刷新事件

原文:http://blog.csdn.net/liuhenghui5201/article/details/25287401

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!