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 项目结构：

演示效果如下：

首次访问显示第一页：

最后一页：

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

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

时间： 2024-10-12 21:37:17

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

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']); //---------------------------------

sencha 2.3中自定义PullRefreshFn给PullRefresh添加下拉刷新事件

Sencha removed the refreshFn from the pullrefresh plugin in ST 2.2. Here is an user extension with gives the old functionality back to you. /** * This user extension gives st 2.3.0 Pullrefresh the RefreshFn back * based on sencha touch 2.3.0 * * @cla

【转】在Eclipse中安装和使用TFS插件

文章地址:http://www.cnblogs.com/judastree/archive/2012/09/05/2672640.html 问题: 在Eclipse中安装和使用TFS插件. 解决过程: 在Eclipse中安装插件的方法其实都一样,安装TFS的步骤如下: 下载TFS插件.你可以到微软的下载中心,下载TFS插件TFSEclipsePlugin-UpdateSiteArchive-10.0.0.zip. 下载完毕之后,打开Eclipse. 点击Help菜单中的Install New S

在Gradle中使用jaxb的xjc插件

jaxb,全称为Java Architecture for Xml Binding,是一种将java对象与xml建立起映射的技术.其主要提供两个功能,一是将java对象映射为xml,二是将xml映射为java对象.JAXB有1.0版和2.0版.2.0版对应的JSR(Java specification request, java规格要求)是JSR 222.jaxb中的xjc工具能够将XML Schema转换为对应的java类.支持的XML类型包括XML DTD,XSD以及WSDL.而schema

Android4.2.2下Stagefright多媒体架构中的A31的OMX插件和Codec组件

本文均属自己阅读源码的点滴总结,转账请注明出处谢谢. 欢迎和大家交流.qq:1037701636 email: [email protected] 在前面的博文中提到,AwesomePlayer::onPrepareAsyncEvent()开始进行Codec解码器组件的获取以及创建,这里和大家分享. 1.以解码器实例作为切入点 status_t AwesomePlayer::initVideoDecoder(uint32_t flags) { ATRACE_CALL(); ...... ALOG

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.zip文件放在指定的目录下,例如D:\Programs\Android,不解压. 打开MyEclipse,点击菜单Help >MyEclipse Configuration Center,如下图 在MyEclipse Configuration Center中,点击Software标签,再点击add

MyEclipse 10.0破解，及建立Myeclipse中建立JFrame 和Swing插件的使用

一.MyEclipse 注册码生成 免积分下载 http://download.csdn.net/detail/u014112584/7270453 具体使用过程: myeclipse 9.1.10 破解 激活,java编写,适用于装有java环境的各种操作系统,win,linux,maxos 第一步:输入任意用户名 第二步:点击Systemid... 按钮,自动生成本机器的systemid. 第三步: 点菜单Tools->RebuildKey 第四步:点击active按钮.会在显示区域生成 L

iOS开发中常用的几个插件

上篇文章简单的说了下Xcode中的插件管理工具Alcatraz,今天呢就给大家分享一些自己在开发中使用较多的插件,可以帮助你提高开发效率,如果你还没有使用过Alcatraz,那么你可以先戳这里Alcatraz的安装与使用 1. KSImageNamed KSImageNamed可以根据图像名称快速选择图片的插件,可以快速的帮你选择自己想要的图片. 2. VVDocumenter VVDocumenter用于Xcode中快速的添加注释,为开发者阅读代码提供了很大的帮助. 3.FuzzyAutoco

xcode中加入声音文件前所做的步骤

1创建工程 2选中工程 然后选中中间图示的“build Phases”第五个按钮 放开带三个选项“ 并点击加号 选中AudioToolbox.framework,并add. 记得在要用声音的文件中加入头文件 #import<AudioToolbox/AudioToolbox.h>. xcode中加入声音文件前所做的步骤,布布扣,bubuko.com