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地址。