实际上本实施例是相对简单的。自定义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); } });
server端模拟代码例如以下:
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"}]}"; @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; 500px; margin: 5 5 5 5; font-size: 8px; } </style> </head> <body> </body> </html>
Eclipse 项目结构:
演示效果例如以下:
首次訪问显示第一页:
最后一页:
下拉刷新效果为:又一次载入第一页。
版权声明:本文博主原创文章,博客,未经同意不得转载。