论坛 › Web开发 › Sencha Touch 2.0 List实例

cu_Cbear 发表于 2012-02-19 20:19

Sencha Touch 2.0 List实例

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

            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坐标值

寂寞冲咖啡 发表于 2012-02-19 20:20

谢谢分享

查看完整版本: Sencha Touch 2.0 List实例