需求：

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

闲言碎语：

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

分析：

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

首先，让我们认识一下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)出来的东西。

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); } }); } });