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能决定一切，这个只是传递到服务端的参数而已

效果图：

posted @ 2013-09-16 10:55  魔狼再世  阅读(1935)  评论(0)  编辑  收藏  举报