不顺畅的原因其实是元素太多,必需限制显示的数据,但又要解决上滚和下滚显示相应的项,有人会想到用分页,其实分页相当的麻烦,下面就说一个鄙人奋战了一天摸索出来的方法,仅仅三步,几行代码,你看了也会会心一笑.
me.pageNum = 1;//当前页
me.pageItems = Ext.is.Phone?15:25;//每页显示项 me.list.scroller.on('scrollend',me.onScrollerEnd,me);//监听滚动停止事件
onScrollerEnd : function(scroller,offsets){//分页逻辑
var me = this,
lh = scroller.size.height,
h = me.list.getHeight(),
y = offsets.y;
if(me.filterValue && me.filterValue!=''){return;}
if(y==0){//滚动到顶部时显示上一页
if((me.pageNum>1)){
me.pageNum--;
me.doPaging ();
}
}else if((y+h)>=lh){//滚动显底部时显示下一页
var c = me.listStore.getCount();
if(c > (me.pageNum*me.pageItems)){ me.pageNum++;
me.doPaging ();
}
}
},
doPaging : function(){//分页逻辑
var me = this,
n = me.pageNum,
y = me.pageItems;
me.helpStore.removeAll();//清除所有数据
me.helpStore.add(me.listStore.getRange((n-1)*y, (n*y)));//取主store里的范围
me.list.bindStore(me.helpStore);//绑定到当前list里
me.list.scroller.scrollTo({x: 0, y:0}, false);//滚动到顶部
},//end function doPaging
分享到:
相关推荐
sencha touch 折叠list
sencha touch list demo
本文通过对 Sencha Touch 框架的介绍,使读者对该框架有一定的了解,并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...
A demonstration of how the list view works in Sencha Touch 2.
sencha touch 2.4.0最新版 原版包下载
sencha touch 应用案例 sencha touch 案例 一个完整的sencha touch 应用案例 移动WEB社区开发的日志案例 非常不错!
sencha touch 是一个移动平台UI开发框架,可以实现各种绚丽的页面效果
Sencha Touch开发的项目《般若人生》源码
sencha touch 2 实现的贪吃蛇 希望对大家有所帮助
sencha touch中文翻译文档,包含sencha touch入门基础和一些控件的使用说明
这是我做的一个sencha touch 的项目,测试并能运行,希望对大家有帮助
sencha touch sdk工具
sencha touch grid
MAC OS 下sencha touch +cordova 开发环境配置。可以将H5 hybird 应用打包成IOS 应用。
sencha touch cookbook 英文高清文字版 !
《Sencha Touch 权威指南》陆凌牛著的源码包
Sencha Touch是专门用于移动...使用Sencha Touch,开发者可以构建在iPhone、Android和BlackBerry touch等设备上运行的移动web应用,其效果看起来如同本地应用。目前Sencha Touch已经成为构建移动HTML5应用的领先框架。
Sencha Touch 2入门教程之MVC 讲解如何使用 Sencha Touch 2 mvc模式来开发一个登录界面
sencha touch2移动开发框架,ajax获取数据