Sencha Touch 2 中 listpaging 与 pullrefresh 2个插件的使用（分页功能实现）

plugins: [{

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

　　　　　　　　},{

　　　　　　　　　　xclass: 'Ext.plugin.ListPaging',

　　　　　　　　　　loadMoreText: '更多……',

　　　　　　　　　　noMoreRecordsText: '没有更多条记录了',

　　　　　　　　　　autoPaging: true //设置为TRUE将自动触发

　　　　　　}]

主要代码是这样一个形式，下面说一下参数问题。

pullrefresh中相关参数：

　　page = 1  用户传递分页参数

　　limit = 25 每个分页的数量限制

　　start = 0 根据page与limit计算所得

这些参数会在访问URL时以参数传递到后台 。

下拉刷新链接地址如下：

labtest.ashx?fn=GetLabTestListS&_dc=1338972073885&pid=0003222210&vid=2&resultStatus=%25&page=1&start=0&limit=30&callback=Ext.data.JsonP.callback7

加载更多链接地址如下：

labtest.ashx?fn=GetLabTestListS&_dc=1338973053666&pid=0003222210&vid=2&resultStatus=%25&page=2&start=30&limit=30&callback=Ext.data.JsonP.callback8

（注意观察page、start、limit参数的变化）

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

refreshFn: function (loaded, arguments) {
 7 　　　　　　　　　　　 loaded.getList().getStore().getProxy().setExtraParam('q', '参数');
 8                     loaded.getList().getStore().loadPage(1, {
 9                         callback: function (record, operation, success) {
10                             Ext.Viewport.unmask();
11                         },
12                         scope: this
13                     });
14                 }

 

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

下面说明下对应的store的配置（model就不具体说明了）：

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

asp.net后台代码（简单的jsonp数据传输）：

　　　　　/// <summary>
        /// 查询-xxx-分页
        /// </summary>
        /// <param name="context">HTTP头部</param>
        /// <returns></returns>
        public string GetLabTestListS(HttpContext context)
        {
            string pid = context.Request["pid"];
            string vid = context.Request["vid"];
            int page = Convert.ToInt32(context.Request["page"]);
            int limit = Convert.ToInt32(context.Request["limit"]);
            string result = "";
            string resultStatus = "";
            try
            {
                resultStatus = context.Request["resultStatus"];
            }
            catch
            { }
            if (resultStatus != "4")
            {
                resultStatus = "%";
            }
            result = labTestService.GetLabTestListJson(pid, vid, page,limit, resultStatus);
            List<LabTestModel> list = result == string.Empty ? new List<LabTestModel>() : JsonConvert.DeserializeObject<List<LabTestModel>>(result);
            StringBuilder sb = new StringBuilder();
            StringWriter sw = new StringWriter(sb);
            JsonSerializer json = new JsonSerializer();
            using (JsonWriter writer = new JsonTextWriter(sw))
            {
                writer.Formatting = Formatting.Indented;
                writer.WriteStartObject();
                writer.WritePropertyName("resultdata");
                writer.WriteStartObject();
                if (result != string.Empty)
                {
                    writer.WritePropertyName("Labs");
                    json.Serialize(writer, list);
                }
                writer.WriteEndObject();
                writer.WriteEndObject();
                string jsonString = sb.ToString();

                String cb = context.Request["callback"];
                String responseString = "";
                if (!String.IsNullOrEmpty(cb))
                {
                    responseString = cb + "(" + jsonString + ")";
                    context.Response.ContentType = "application/x-javascript";

                }
                else
                {
                    responseString = jsonString;
                }
                context.Response.ContentType = "application/x-javascript";
                return responseString;
            }
        }

　　

数据接口具体实现：

public override List<Model.LabTestModel> GetLabTestList(string pid, string vid, int page,int limit, string resultStatus)
        {
            //throw new NotImplementedException();

            //从数据库取数据
            DataTable dt = new DataTable("labTest");
            DBHelper dbHelper = DBHelperFactory.CreateDBHelperInstance(Constant.HisConnectString, Constant.HisDbType);
            Dictionary<string, string> dict = new Dictionary<string, string>();
          　　
========================================着重部分=====================================
            dict.Add("ResultStatus", resultStatus);
            dict.Add("start", ((page - 1) * limit).ToString());
            dict.Add("end", (page * limit).ToString());
========================================着重部分=====================================

//后面可以省略
try { //查询-xxx-分页 dbHelper.Open(); dt = dbHelper.ExecuteQueryByName("查询-xxx-分页", dict).Tables[0]; dbHelper.Close(); } catch (DbException ex) { System.Console.WriteLine(ex.Message); } //数据填充部分省略
　　　　　　  return ……;
            
        }

　　

oracle 8 中的SQL语句 

select *
  from (SELECT ITEM_NO,
               TEST_NO,
               rownum AS rowno,
          FROM LAB_TEST_ITEMS
         WHERE rownum <= @end) table_alias
 where table_alias.rowno > @start

@end和@start为前台传递过来

　　

这大致是st2中的分页整个代码部分，大家可以使用谷歌游览器的调试功能获取到具体加载或者刷新是的URL地址。