SenchaTouch2.3.1 中使用listpaging以及pullrefresh插件做的分页示例

本实例其实也比较简单，自己定义一个PullRefreshFn插件继承Ext.plugin.PullRefresh。主要给其添加了refreshFn下拉监听事件。listpaging插件未做任何修改。再将这两个插件添加到 list中。

本例未采用MVC模式。

app.js代码如下：

Ext.require(['Ext.form.Panel','Ext.data.Store','Ext.dataview.DataView']);
//---------------------------------------------------------------------------------Ext.define('myapp.model.PullRefreshFn', {extend: 'Ext.plugin.PullRefresh',alias: 'plugin.pullrefreshfn',requires: ['Ext.DateExtras'],xtype:'refreshFn',config: {refreshFn: null,pullText: '下拉可以更新',lastUpdatedText:"上次刷新时间",lastUpdatedDateFormat:"Y-m-d H:i",releaseText:"松开开始更新",loadedText:"加载完成"},fetchLatest: function() {if (this.getRefreshFn()) {this.getRefreshFn().call(this, this);this.setState("loaded");this.fireEvent('latestfetched', this, 'refreshFn, you have to handle toInsert youself');if (this.getAutoSnapBack()) {this.snapBack();}} else {    console.log('fetchLatest')var store = this.getList().getStore(),proxy = store.getProxy(),operation;operation = Ext.create('Ext.data.Operation', {page: 1,start: 0,model: store.getModel(),limit: store.getPageSize(),action: 'read',sorters: store.getSorters(),filters: store.getRemoteFilter() ? store.getFilters() : []});proxy.read(operation, this.onLatestFetched, this);}},snapBack: function(force) {if(this.getState() !== "loaded" && force !== true) return;var that = this,list = this.getList(),scroller = list.getScrollable().getScroller(),currentY = scroller.minPosition.y;scroller.refresh();scroller.minPosition.y = 0;scroller.on({scrollend: this.onSnapBackEnd,single: true,scope: this});this.setIsSnappingBack(true);scroller.getTranslatable().translateAnimated(0, currentY, {duration: this.getSnappingAnimationDuration()});setTimeout(function () {scroller.scrollTo(0,1);scroller.scrollToTop();},that.getSnappingAnimationDuration());}
});
//------------------------------------------------------------------------------------------Ext.application({name:'MyApp',icon:'images/icon.png',glossOnIcon:false,phoneStarupScreen:'images/starUp.png',tabletStartupScreen:'images/tablet.png',launch:function(){Ext.define('User',{extend:'Ext.data.Model',config:{fields:[{name:'id',type:'string'},{name:'name',type:'string'},{name:'img',type:'string'},{name:'age',type:'string'},{name:'url',type:'string'},{name:'email',type:'string'},{name:'info',type:'string'}]}});var userStore=Ext.create('Ext.data.Store',{model:'User',id:'storeId',autoLoad:true,pageSize:8,proxy:{type:'ajax',limitParam: 'pageSize', //设置limit参数，默认为limitpageParam: 'page', //设置page参数，默认为pageurl:'ServerDataServlet',reader:{type:'json',rootProperty:'users'}},listeners:{load:function(store, records, successful, operation, eOpts){if(!successful){//这个事件具体的可以看API  no more record 也会进入
//                      Ext.Msg.alert(userStore.getProxy().getReader().rawData.message);}}}});var userTemplate = new Ext.XTemplate('<tpl for=".">','<div class="user_img"><img src="{img}" width="50" height="50"/>编号：{id}姓名：{name}年龄：{age}主页：{url}邮件：{email}个人信息:{info}</div>','</tpl>');var dataview=Ext.create('Ext.dataview.List',{store:userStore,itemTpl:userTemplate,plugins: [{xtype: 'refreshFn',refreshFn: function (loaded, arguments) {
//                  Ext.Msg.alert('别他妈拉我了! 艹');        触发了下拉刷新事件Ext.getStore(userStore).loadPage(1,'what',1);}},{xclass: 'Ext.plugin.ListPaging',autoPaging: true}],listeners:{itemtap:function( ok, index, target, record, e, eOpts){//  alert(record.get("id"));}}});Ext.Viewport.add(dataview);}
});

服务器端模拟代码如下：

package cn.com.xiaohui;import java.io.IOException;
import java.util.Enumeration;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class ServerDataServlet extends HttpServlet {private String jsonStr1="{\"success\":true,\"users\":[{\"id\":\"AAAAAAAAA\",\"name\":\"A-A-A\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://zahngsan.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"BBBBBBBBB\",\"name\":\"lisi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://lisi.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"CCCCCCCCCCC\",\"name\":\"wangwu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"DDDDDDDDDD\",\"name\":\"zhaoliu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"EEEEEE\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"FFFFFFFFF\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"GGGGGGGG\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"HHHHHHHH\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"}]}";private String jsonStr2="{\"success\":true,\"users\":[{\"id\":\"000000001\",\"name\":\"zhangsan\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://zahngsan.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"00000002\",\"name\":\"lisi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://lisi.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"00000003\",\"name\":\"wangwu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"0000000004\",\"name\":\"zhaoliu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"00000005\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"0000006\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"0000007\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"0000008\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"000009\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"00000010\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"}]}";private String jsonStr3="{\"success\":true,\"users\":[{\"id\":\"one\",\"name\":\"zhangsan\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://zahngsan.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"two\",\"name\":\"lisi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://lisi.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"three\",\"name\":\"wangwu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"four\",\"name\":\"zhaoliu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"five\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"six\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"},{\"id\":\"sevlen\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"wsk@163.com\",\"info\":\"a good boy\"}]}";@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {Enumeration e = req.getParameterNames();while(e.hasMoreElements()){String key = (String)e.nextElement();String value = req.getParameter(key);System.out.println(key+" ---- "+value);}int  pageSize = Integer.parseInt(req.getParameter("pageSize"));int page = Integer.parseInt(req.getParameter("page"));if(page==1){System.out.println("加载了 第"+page+"页。。。。。");resp.getOutputStream().print(jsonStr1);}else if(page==2){System.out.println("加载了 第"+page+"页。。。。。");resp.getOutputStream().print(jsonStr2);}else if(page==3){System.out.println("加载了 第"+page+"页。。。。。");resp.getOutputStream().print(jsonStr3);}else {System.out.println("没有数据了");resp.getOutputStream().print(null);}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {}}

index.html 如下：主要有一个样式在主页

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>index.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="sencha-touch.css"><script type="text/javascript" src="sencha-touch-all-debug.js"></script><script type="text/javascript" src="app.js"></script><style type="text/css">.user_img{border: 1PX solid black; width: 500px;margin: 5 5 5 5;font-size: 8px;}</style></head><body></body>
</html>

Eclipse 项目结构：

演示效果如下：

首次访问显示第一页：

最后一页：

下拉刷新效果为:重新加载第一页。

SenchaTouch2.3.1 中使用listpaging以及pullrefresh插件做的分页示例相关推荐

ubuntu chrome java插件_在Ubuntu中为Chrome安装Java插件
问题描述我有JDK,在Ubuntu中一切正常,我是说IDE,一些应用程序,我能够开发和运行项目,但是我在Chrome中收到一条消息:Java(TM) is required to display t ...
MyEclipse 10 中安装Android ADT 22插件的方法
MyEclipse 10 中安装Android ADT 22插件的方法下载ADT包:http://dl.google.com/android/ADT-22.0.0.zip 将ADT-22.0.0.z ...
php中并发读写文件冲突的解决方案(文件锁应用示例)
php中并发读写文件冲突的解决方案(文件锁应用示例) 参考文章: (1)php中并发读写文件冲突的解决方案(文件锁应用示例) (2)https://www.cnblogs.com/wellsoho/p ...
将DataFrame中的每一列分别做归一化处理的函数实现
将DataFrame中的每一列分别做归一化处理的函数 def regularit(df):newDataFrame = pd.DataFrame(index=df.index)columns = df ...
java 多个监听_java中监听一个客户端怎么做？监听多个怎么做？
随着时代的不断进步与发展,人们对于科学技术的使用也越来越普遍化.人们都开始自己学习编程语言以更好的适应时代的发展.今天就来为大家介绍一下,java中监听一个客户端怎么做?监听多个怎么做?一起来看看吧. ...
python的命名空间_python中命名空间的三种方式介绍（附示例）
本篇文章给大家带来的内容是关于python中命名空间的三种方式介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. python中的命名空间分三种: 内置的命名空间,在启动解 ...
php截取数组中的字符串,PHP 中使用explode()函数切割字符串为数组的示例
explode()函数的作用:使用一个字符串分割另一个字符串,打散为数组. 例如: 字符串 PHP;"> $pizza = "第1 第2 第3 第4 第5 第6"; ...
treeview自动从表中添加标题和列值做目录的方法2
treeview自动从表中添加标题和列值做目录的方法2,该方法是借鉴万一老师的 http://www.cnblogs.com/del/archive/2008/05/15/1114450.html 首 ...
TestNG中的参数化– DataProvider和TestNG XML（带有示例）
测试自动化,或所谓的自动化测试,并不像听起来那样容易. 必须考虑所有可能的用户交互的所有排列和组合,并且在此基础上,您将必须创建测试脚本以通过多种浏览器和OS组合来验证Web应用程序. 这就是参数化在 ...

SenchaTouch2.3.1 中使用listpaging以及pullrefresh插件做的分页示例

SenchaTouch2.3.1 中使用listpaging以及pullrefresh插件做的分页示例相关推荐

最新文章

热门文章

SenchaTouch2.3.1 中使用listpaging以及pullrefresh插件 做的分页示例

SenchaTouch2.3.1 中使用listpaging以及pullrefresh插件 做的分页示例相关推荐

最新文章

热门文章

SenchaTouch2.3.1 中使用listpaging以及pullrefresh插件做的分页示例

SenchaTouch2.3.1 中使用listpaging以及pullrefresh插件做的分页示例相关推荐