Sencha Touch 2.0 List滚动实例

onReady: function()

{

        //定义数据结构

        Ext.define('Contact', {
            extend: 'Ext.data.Model',
            fields: ['firstName', 'lastName']
        });

     

     //定义数据内容

      var store = Ext.create('Ext.data.Store', {
            model: 'Contact',
            sorters: 'lastName',

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

            data: [
                  { firstName: 'Tommy', lastName: 'Maintz' },
                  { firstName: 'WdTommy1', lastName: '2' },
                  ]
        });

         //定义List

         var list = Ext.create('Ext.List', {
            fullscreen: true,
            itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
            store: store,
            onItemDisclosure: function(record) {
               alert(record.data.firstName);
            },
        });

 

       //注册滚动的监听事件  用于分页
        list.getScrollable().getScroller().on('scrollend', function(scroller, offset) {
                   console.log(offset.y); 
                   console.log(scroller.maxPosition.y);
                   if(offset.y >= scroller.maxPosition.y) //到底部
                   {

                        //加载下一页数据
                        list.getStore().loadData([
                        { firstName: 'fwt', lastName: '' }
                        ],true);
                   }       
        });

}

注意以下几点，与2.0以下版本不同。

list.getStore() //活动List的数据内容

list.getScrollable().getScroller() //获取List的滚动条对象

offset.y       //当前滚动条的y坐标值

scroller.maxPosition.y   //窗体滚动条的最大Y坐标值