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

效果图：