sencha touch list ListPaging使用详解

示例代码：

 1 Ext.define('app.view.message.List', {

 2     alternateClassName: 'messageList',

 3     extend: 'Ext.List',

 4     xtype: 'messageList',

 5     requires: ['Ext.plugin.ListPaging'],

 6     config: {

 7         cls: 'list',

 8         plugins: [{

 9             xclass: 'Ext.plugin.ListPaging'

10         }],

11         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>',

12         store: 'messageList'

13     }

14 });

store：

 1 Ext.define('app.store.MessageList', {

 2     extend: 'Ext.data.Store',

 3     config: {

 4         model: 'app.model.Message',

 5         storeId: 'messageList',

 6         //是否在app启动时自动加载数据，手动加载方法为store.load();或者store.loadPage(1);请自行查看api

 7         autoLoad: false,

 8         //每页显示数据条数，此参数传递到服务端

 9         pageSize: 7,

10         proxy: {

11             type: 'ajax',

12             //服务端地址

13             url: config.messageList,

14             //分页每页显示条数名称，默认为limit，此参数传递到服务端

15             limitParam: 'limit',

16             //分页页码名称，默认为page，此参数传递到服务端

17             pageParam: 'currentpage',

18             reader: {

19                 type: "json",

20                 //服务端返回数据集数据源名称，用于指定数据源，可以不指定默认值为‘’

21                 rootProperty: 'messagelist',

22                 //服务端返回数据集数据总数名称，用于分页，默认值为total

23                 totalProperty: 'count'

24             }

25         }

26     }

27 });

Model：

 1 //校园咨询

 2 Ext.define('app.model.Message', {

 3     extend: 'Ext.data.Model',

 4     config: {

 5         fields: [{

 6             name: 'id',

 7             type: 'int'

 8         },

 9         {

10             //标题

11             name: 'Title',

12             type: 'string'

13         }]

14     }

15 });

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

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

 1 {

 2     "messagelist": [{

 3         "id": 14466,

 4         "Title": "标题1"

 5     },

 6     {

 7         "id": 14467,

 8         "Title": "标题2"

 9     },

10     {

11         "id": 14468,

12         "Title": "标题3"

13     }],

14     "count": 244

15 }

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

效果图：