Sencha Touch 1.x 用scroller实现滚到底部加载更多

需求：

当list滚动到末尾的时候，自动加载更多的内容。

闲言碎语：

其实这个问题要解决非常简单。但首先，我相信，大家不是为了简单的copy那几行代码而来的。相信看了详细的解说，大家能够真正有所收获，能够举一反三。毕竟sencha touch的中文资料不多，很多问题，都是找不到现成的解决方案的，这就需要我们自己动手去解决啦。

分析：

要搞定这个问题，首先要知道跟滚动相关的一些东西。

请大家打开api文档，跟我一起来吧！不清楚文档使用方法的请看Sencha Touch 快速入门2.0 第四章 Api文档看懂了吗？

首先，让我们认识一下ST框架里的scroller对象。

scroller对象

scroller在sencha touch里扮演着十分重要的角色。所有的滚动相关功能的实现，都跟它脱不了干系。

不知道大家是否有发现，sencha touch里有许多对象都有一个scroller的配置项?



这个配置项，就是用来为当前对象创建一个Scroller的。以Panel为例，Sencah Touch框架在构造Panel的时候，判断scroll配置项，然后根据配置项的值new出相应的scroller，并将其赋给panel。这样一来Panel就能实现了滚动功能了！

我们可以用这样的写法：panel.scroller。来获取panel的scroller对象，用它来实现各种功能。

对于scroller比较重要的一些东西，



这是console.log(scroller)出来的东西。不清楚的同学可以看看Sencha Touch 快速入门2.0 第二章 Chorme浏览器调试功能介绍

offset是当前滚动条位置。

offsetBoundary表示滚动条的边界。

也就是说，我们只需要在滚动结束时，比较这两个值就行了。那么现在还缺什么？一个事件！Ok，让我们看看滚动结束事件：



到这里，怎么实现，大家肯定比我还清楚了，5行代码搞定。

list.scroller.on('scrollend',function(scroller,offset){
if(Math.abs(scroller.offset.y) > Math.abs(scroller.offsetBoundary.top) - 50){
//这里添加数据
}
});

store添加数据的方法

额。。。真的吗？好像漏了点东西。怎么添加数据呢？

恩，在这里呢。有两个呢。





可以看到，第一个参数是要添加的数据，而第二个是读取方式，决定是添加还是覆盖。

因为我要用写死的数据作示范，所以这里我用第一个来实现添加数据，大家根据格子实际获取的数据类型来作决定。

于是最终代码

list.scroller.on('scrollend',function(scroller,offset){
if(Math.abs(scroller.offset.y) > Math.abs(scroller.offsetBoundary.top) - 50){
list.store.loadData([
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'}
], true);
}
});

很简单吧。

解决方案：

接下来就是全部代码了，大家可以自己拿去运行一下。

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var groupingBase = {
itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
selModel: {
mode: 'SINGLE',
allowDeselect: true
},

onItemDisclosure: {
scope: 'test',
handler: function(record, btn, index) {
alert('Disclose more info for ' + record.get('firstName'));
}
},

store: new Ext.data.Store({
model: 'Contact',

getGroupString : function(record) {
return record.get('firstName')[0];
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
})
};

var list = new Ext.List(Ext.apply(groupingBase, {
fullscreen: true
}));

list.scroller.on('scrollend',function(scroller,offset){
if(Math.abs(scroller.offset.y) > Math.abs(scroller.offsetBoundary.top) - 50){
list.store.loadData([
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'}
], true);
}
});
}
});