sencha touch list ListPaging使用详解

示例代码：

 Ext.define('app.view.message.List', {
     alternateClassName: 'messageList',
     extend: 'Ext.List',
     xtype: 'messageList',
     requires: ['Ext.plugin.ListPaging'],
     config: {
         cls: 'list',
         plugins: [{
             xclass: 'Ext.plugin.ListPaging'
         }],
         itemTpl: '<div class="title">{Title}</div><div class="sm">时间 {Time}&nbsp;&nbsp;&nbsp;&nbsp;发布来源：{Auth}</div><div class="like"><div class="ico comment">0</div></div>',
         store: 'messageList'
     }
 });

store：

 Ext.define('app.store.MessageList', {
     extend: 'Ext.data.Store',
     config: {
         model: 'app.model.Message',
         storeId: 'messageList',
         //是否在app启动时自动加载数据，手动加载方法为store.load();或者store.loadPage(1);请自行查看api
         autoLoad: false,
         //每页显示数据条数，此参数传递到服务端
         pageSize: 7,
         proxy: {
             type: 'ajax',
             //服务端地址
             url: config.messageList,
             //分页每页显示条数名称，默认为limit，此参数传递到服务端
             limitParam: 'limit',
             //分页页码名称，默认为page，此参数传递到服务端
             pageParam: 'currentpage',
             reader: {
                 type: "json",
                 //服务端返回数据集数据源名称，用于指定数据源，可以不指定默认值为‘’
                 rootProperty: 'messagelist',
                 //服务端返回数据集数据总数名称，用于分页，默认值为total
                 totalProperty: 'count'
             }
         }
     }
 });

Model：

 //校园咨询
 Ext.define('app.model.Message', {
     extend: 'Ext.data.Model',
     config: {
         fields: [{
             name: 'id',
             type: 'int'
         },
         {
             //标题
             name: 'Title',
             type: 'string'
         }]
     }
 });

注：只有在model中定义的字段才能在list中显示，没有定义就算返回数据集中有个字段也不能显示，更不能进行过滤分组等操作

服务端返回数据格式(json数据)为：

 {
     "messagelist": [{
         "id": 14466,
         "Title": "标题1"
     },
     {
         "id": 14467,
         "Title": "标题2"
     },
     {
         "id": 14468,
         "Title": "标题3"
     }],
     "count": 244
 }

服务端返回多少条数据，list就展示多少条。所以不要天真的以为pageSize能决定一切，这个只是传递到服务端的参数而已

效果图：