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参数，默认为limit
pageParam: 'page', //设置page参数，默认为page
url:'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\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"BBBBBBBBB\",\"name\":\"lisi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://lisi.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"CCCCCCCCCCC\",\"name\":\"wangwu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"DDDDDDDDDD\",\"name\":\"zhaoliu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"EEEEEE\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"FFFFFFFFF\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"GGGGGGGG\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"HHHHHHHH\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"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\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"00000002\",\"name\":\"lisi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://lisi.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"00000003\",\"name\":\"wangwu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"0000000004\",\"name\":\"zhaoliu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"00000005\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"0000006\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"0000007\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"0000008\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"000009\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"00000010\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"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\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"two\",\"name\":\"lisi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://lisi.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"three\",\"name\":\"wangwu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"four\",\"name\":\"zhaoliu\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"five\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"six\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"},{\"id\":\"sevlen\",\"name\":\"qianqi\",\"img\":\"images/user.jpg\",\"age\":\"23\",\"url\":\"http://henghui.com\",\"email\":\"[email protected]\",\"info\":\"a good boy\"}]}";
@Override
protected 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);
}
}
@Override
protected 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 项目结构：
演示效果如下：
首次访问显示第一页：
最后一页：
下拉刷新效果为:重新加载第一页。
