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

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就不具体说明了）：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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数据传输）：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

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

　　

数据接口具体实现：

?

1 2 3 4 5 6 7 8 9 10 11 12

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 >();            　　<br>========================================着重部分=====================================              dict.Add( "ResultStatus" , resultStatus);              dict.Add( "start" , ((page - 1) * limit).ToString());              dict.Add( "end" , (page * limit).ToString());<br>========================================着重部分=====================================

?

1 2 3

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

　　

?

1	oracle 8 中的SQL语句 <strong><br><br></strong>

?

1 2 3 4 5 6 7

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

?

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

　　

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