Sencha Touch下拉刷新、上拉自动加载

在list的config中添加插件

defaults:{

xtype : 'list',

height : Public.screenHeight * .82 - 10,

style:'background : transparent;border-right:#EEE 1px solid;',

        itemCls : 'left-list',

        plugins:[{

          xclass: 'HD.ListPagingFn',

          autoPaging: true,//是否滚动到页面底部的时候自动请求刷新 如果不设置则为点击加载更多时会加载下一页

          noMoreRecordsText :  "没有更多数据了!",

          loadMoreText :  "加载更多数据..."

            },{

    xclass: 'Ext.plugin.PullRefresh',

               　   pullRefreshText: '下拉可以更新',

               　　　releaseRefreshText: '松开开始更新',

            　　　　　loading: '正在刷新……',

       　　　　　　　　refreshFn: function (loaded, arguments) { 　　　　　　 　　

           　　　　　　　　　　loaded.getList().getStore().getProxy().setExtraParam('q', '参数'); //设置proxy参数

           　　　　　　　　　　loaded.getList().getStore().loadPage(1, {

        　　　　　　　　　　　　 callback: function (record, operation, success) { 

           Ext.Viewport.unmask(); }, scope: this 

           });

            }

            }],

            scrollable :{direction : 'vertical'}

},

下面这段代码为下拉刷新方法，用来具体实现刷新操作：

refreshFn: function (loaded, arguments) {

loaded.getList().getStore().getProxy().setExtraParam('q', '参数');

loaded.getList().getStore().loadPage(1, {

callback: function (record, operation, success) {

Ext.Viewport.unmask();

},

scope: this

});

}

注意：刷新是需要使用到store.loadPage()这个方法，如果不使用此方法进行加载的话，url的参数page是不会被初始化的，这样会造成不必要的麻烦。

下面说明下对应的store的配置：

Ext.define('Voyager.store.exam.Exams', {

    extend: 'Ext.data.Store',

    requires: ['Voyager.model.Exam'],

    config : {

        autoLoad: false,

        pageSize: 30, //对应的每页数据量

        model : 'Voyager.model.Exam',

        proxy : {

            type: 'jsonp',

            callbackKey: 'callback',

            limitParam: 'limit', //设置limit参数，默认为limit

            pageParam: 'page', //设置page参数，默认为page

            url: 'ExamTest.ashx?flag=GetExamTestList',

            reader : {

                type: 'json',

                rootProperty: 'resultdata.Exams'

            }

        }

    }

});