sencha touch下拉刷新上拉加载实现

1、下拉刷新,就是刷新store中的数据,即store和数据库中的数据同步,同步最新的数据

2、上拉加载,就是同一般的app一样,上拉加载下一页,即分页加载方式

方法:

在list的config中添加插件

   plugins: [
       {
          xclass: 'Ext.plugin.ListPaging',
autoPaging: true,//是否滚动到页面底部的时候自动请求刷新
noMoreRecordsText :  "没有更多数据了!",
loadMoreText :  "加载更多数据..."
       },{  
xclass: 'Ext.plugin.PullRefresh',
pullText: '下拉刷新...',
releaseText : '松开刷新...',
loadingText : '请稍等...',
loadedText : '加载...',
lastUpdatedText : '最近刷新时间 '
       }
   ],


store中的分页写法如下

var myStore = Ext.create('Ext.data.Store', {
     model: 'ScoreBuyModel',
     pageSize: 5,  //第一页展示的数量
     proxy: {
            type: "jsonp",
      url: '../../cmi/groupAction.ered?reqCode=selectuserinfo&unlogin=1',
            reader: {
                type: "json",
                rootProperty: "list"
            },
            listeners:{
exception:function(proxy,response,options){
pnt.jsErrMsg(response.responseText);
}
}
        },
     autoLoad: true//是否自动加载,一般为否
 });

这里只接受实现简单的方法,若想实现更多,请参考store的api文档



后台接收的参数为如下所示:

start开始记录数,limit第一页显示的记录数,page页码,此参数可以根据需求利用此参数,callback回调参数,在返回前台数据时候需要用到


 String start= (String)request.getParameter("start"); 
String limit= (String)request.getParameter("limit"); 
String page= (String)request.getParameter("page"); 
String callback= (String)request.getParameter("callback"); 


后台返回前台数据格式要求如下:

 callback为回调参数,必须带上,list为根节点参数,与store中的rootProperty保存一致,backStr为json数组 ,total为数据表中的中记录数。

   String str = callback+"({\"list\":"+backStr+",\"total\":"+total+"})";





数据库sql语句书写:

如下是在sqlmap中书写的oracle数据库的sql语句

select *  from (select rownum as rowno, t.userid,t.openid from wx_user t where rownum <![CDATA[ <=]]> #limit#  order by t.userid desc) table_alias
where table_alias.rowno  <![CDATA[ >]]>  #start#


【注意】值得注意的是,要避免下拉刷新时候重复出现数据,需要在model中添加modelid,如下所示

Ext.define('ScoreBuyModel', {
    extend: 'Ext.data.Model',
    fields: [
    'userid',
'szopenid'
],
idProperty:'userid'
});

其中idProperty表示model中的id,如实的id为userid



以上是下拉刷新上拉加载的demo及需要注意的方法,简单吧,just do it

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值