sencha touch list(列表)、 store(数据源)、model(模型)详解

先从model讲起

代码如下：

//求职
Ext.define('app.model.Staff', {
    extend: 'Ext.data.Model',
    config: {
        fields: [{
            name: 'id',
            type: 'int'
        },
        {
            //用户id
            name: 'uid',
            type: 'int'
        },
        {
            //姓名
            name: 'fullname',
            type: 'string',
            convert: function (v, record) {
                var display = record.data.display_name;
                if (display == 1) {
                    return v;
                } else if (display == 2) {
                    return 'N' + record.data.id;
                }
                return v.substring(0, 1) + '**';
            }
        },
        {
            //年龄
            name: 'birthdate',
            type: 'int',
            convert: function (v, record) {
                var time = new Date().getFullYear();
                return time - v;
            }
        },
        {
            //姓隐藏程度
            name: 'display_name',
            type: 'string'
        },
        {
            //全职兼职
            name: 'nature_cn',
            type: 'string'
        },
        {
            //标签
            name: 'tag',
            type: 'string',
            convert: function (v, record) {
                if (!v) {
                    return '';
                }
                var taglist = v.split('|');
                var tag = [];
                for (var i in taglist) {
                    var j = {
                        title: taglist[i].split(',')[1]
                    };
                    tag.push(j);
                }
                return tag;
            }
        },
        {
            //学历
            name: 'education_cn',
            type: 'string'
        },
        {
            //工作经验
            name: 'experience_cn',
            type: 'string',
            convert: function (v, record) {
                return v != "无经验" ? v + '经验' : v;
            }
        },
        {
            //性别
            name: 'sex_cn',
            type: 'string'
        },
        {
            //地址
            name: 'householdaddress',
            type: 'string'
        },
        {
            //刷新时间
            name: 'refreshtime',
            type: 'string'
        },
        {
            //期望岗位
            name: 'intention_jobs',
            type: 'string'
        }]
    }
});

值得注意的是convert方法，有两个参数其中v是当前字段的值，record则是整个model的值
可以根据需求来二次加工数据，比如说后台返回的值是0,1而你希望他显示的值是男,女这种情况

下面再说说store

代码如下：

Ext.define('app.store.StaffList', {
    extend: 'Ext.data.Store',
    config: {
        model: 'app.model.Staff',//对应的数据模型，只有模型中已经定义的字段才能存储到store中，没有定义的字段是不是存储的
        storeId: 'staffList', //给他一个id，以便于list中指定store。以及通过Ext.getStore(id)来得到store
        autoLoad: false,//在index页面启动时不自动加载数据
        pageSize: 7, //想后台传递一个参数pageSize值为7，这里的意思是告诉后台每页显示7条数据，用于分页。
        //还有一个参数limit,用来告诉后台当前显示第几页。
        proxy: {
            type: 'jsonp',//向后台读取数据的方式，可以是jsonp或者ajax
            url: MyUtil.postUrl + StaffList.ashx',//请求数据的地址
            reader: {
                type: "json",//返回数据的格式
                rootProperty: 'result',//返回数据的根节点
                totalProperty: 'totalCounts'//数据总数，后台不给也没事。不过这样就没办法确定是不是最后一页了
            }
        }
    }
});

需要注意的是，pageSize的作用并不是指在list中每次显示多少条数据，而是告诉后台你每次要显示多少条数据，你要7条后台给你10条也是可以的，给你10条list就会显示10条数据上去

就像小学生问妈妈要零用钱，小学生问妈妈要5块，妈妈心情好了给10块也是可以的，心情不好一块也不给。不管给多少，小学生都得乖乖的把钱放到兜兜里面。

对于list可以做一个小小的扩展

/*
*自定义列表页面
*/
Ext.define('app.view.util.MyList', {
    alternateClassName: 'myList',
    extend: 'Ext.List',
    xtype: 'myList',
    requires: ['Ext.plugin.ListPaging', 'Ext.plugin.PullRefresh'],
    config: {
        cls: 'list',//自定义css
        plugins: [{
            xclass: 'Ext.plugin.ListPaging',//分页插件
            autoPaging: true,//滚动到最底部时是否自动加载下一页数据
            noMoreRecordsText: '没有更多内容了',
            loadMoreText: '加载更多...'//加载更多按钮显示内容
        },
        {
            xclass: 'Ext.plugin.PullRefresh',//下拉刷新插件
            lastUpdatedText: '上次刷新时间：',
            loadingText: '加载中...',
            pullRefreshText: '下拉可以手动刷新',
            releaseRefreshText: '松开可以刷新',
            refreshFn: function (loaded, arguments) {//开始刷新触发的时间，默认效果是只刷新第一页数据。不管后面显示了多少数据
                loaded.getList().getStore().loadPage(1);//这里进行了处理，触发时清空所有数据，重新加载第一页数据。
            }
        }],
        loadingText: false,  //禁用加载遮罩，防止跳转时页面卡顿，使用统一的遮罩效果
        emptyText: '没有更多内容了'
    }
});

一个list这样就可以了

Ext.define('app.view.job.StaffList', {
    alternateClassName: 'staffList',
    extend: 'app.view.util.MyList',
    requires: ['app.view.job.StaffInfo'],
    xtype: 'staffList',
    config: {
        itemHeight:68,
        store: 'staffList',
        itemTpl: new Ext.XTemplate(
        '<div class="left">',
            '<div class="row">{fullname}</div><div class="row sm grayF">{education_cn} - {experience_cn} - {nature_cn}</div><div class="row sm grayF">{sex_cn} - {householdaddress}</div>',
        '</div>',
        '<div class="right"><div class="row grayF">{refreshtime}</div><div class="row sm orangeF">{intention_jobs}</div></div>')
    }
});

大概就是这样吧，附图一张