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

先从model讲起

代码如下：

  1 //求职

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

  3     extend: 'Ext.data.Model',

  4     config: {

  5         fields: [{

  6             name: 'id',

  7             type: 'int'

  8         },

  9         {

 10             //用户id

 11             name: 'uid',

 12             type: 'int'

 13         },

 14         {

 15             //姓名

 16             name: 'fullname',

 17             type: 'string',

 18             convert: function (v, record) {

 19                 var display = record.data.display_name;

 20                 if (display == 1) {

 21                     return v;

 22                 } else if (display == 2) {

 23                     return 'N' + record.data.id;

 24                 }

 25                 return v.substring(0, 1) + '**';

 26             }

 27         },

 28         {

 29             //年龄

 30             name: 'birthdate',

 31             type: 'int',

 32             convert: function (v, record) {

 33                 var time = new Date().getFullYear();

 34                 return time - v;

 35             }

 36         },

 37         {

 38             //姓隐藏程度

 39             name: 'display_name',

 40             type: 'string'

 41         },

 42         {

 43             //全职兼职

 44             name: 'nature_cn',

 45             type: 'string'

 46         },

 47         {

 48             //标签

 49             name: 'tag',

 50             type: 'string',

 51             convert: function (v, record) {

 52                 if (!v) {

 53                     return '';

 54                 }

 55                 var taglist = v.split('|');

 56                 var tag = [];

 57                 for (var i in taglist) {

 58                     var j = {

 59                         title: taglist[i].split(',')[1]

 60                     };

 61                     tag.push(j);

 62                 }

 63                 return tag;

 64             }

 65         },

 66         {

 67             //学历

 68             name: 'education_cn',

 69             type: 'string'

 70         },

 71         {

 72             //工作经验

 73             name: 'experience_cn',

 74             type: 'string',

 75             convert: function (v, record) {

 76                 return v != "无经验" ? v + '经验' : v;

 77             }

 78         },

 79         {

 80             //性别

 81             name: 'sex_cn',

 82             type: 'string'

 83         },

 84         {

 85             //地址

 86             name: 'householdaddress',

 87             type: 'string'

 88         },

 89         {

 90             //刷新时间

 91             name: 'refreshtime',

 92             type: 'string'

 93         },

 94         {

 95             //期望岗位

 96             name: 'intention_jobs',

 97             type: 'string'

 98         }]

 99     }

100 });

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

下面再说说store

代码如下：

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

 2     extend: 'Ext.data.Store',

 3     config: {

 4         model: 'app.model.Staff',//对应的数据模型，只有模型中已经定义的字段才能存储到store中，没有定义的字段是不是存储的

 5         storeId: 'staffList', //给他一个id，以便于list中指定store。以及通过Ext.getStore(id)来得到store

 6         autoLoad: false,//在index页面启动时不自动加载数据

 7         pageSize: 7, //想后台传递一个参数pageSize值为7，这里的意思是告诉后台每页显示7条数据，用于分页。

 8         //还有一个参数limit,用来告诉后台当前显示第几页。

 9         proxy: {

10             type: 'jsonp',//向后台读取数据的方式，可以是jsonp或者ajax

11             url: MyUtil.postUrl + StaffList.ashx',//请求数据的地址

12             reader: {

13                 type: "json",//返回数据的格式

14                 rootProperty: 'result',//返回数据的根节点

15                 totalProperty: 'totalCounts'//数据总数，后台不给也没事。不过这样就没办法确定是不是最后一页了

16             }

17         }

18     }

19 });

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

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

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

 1 /*

 2 *自定义列表页面

 3 */

 4 Ext.define('app.view.util.MyList', {

 5     alternateClassName: 'myList',

 6     extend: 'Ext.List',

 7     xtype: 'myList',

 8     requires: ['Ext.plugin.ListPaging', 'Ext.plugin.PullRefresh'],

 9     config: {

10         cls: 'list',//自定义css

11         plugins: [{

12             xclass: 'Ext.plugin.ListPaging',//分页插件

13             autoPaging: true,//滚动到最底部时是否自动加载下一页数据

14             noMoreRecordsText: '没有更多内容了',

15             loadMoreText: '加载更多...'//加载更多按钮显示内容

16         },

17         {

18             xclass: 'Ext.plugin.PullRefresh',//下拉刷新插件

19             lastUpdatedText: '上次刷新时间：',

20             loadingText: '加载中...',

21             pullRefreshText: '下拉可以手动刷新',

22             releaseRefreshText: '松开可以刷新',

23             refreshFn: function (loaded, arguments) {//开始刷新触发的时间，默认效果是只刷新第一页数据。不管后面显示了多少数据

24                 loaded.getList().getStore().loadPage(1);//这里进行了处理，触发时清空所有数据，重新加载第一页数据。

25             }

26         }],

27         loadingText: false,  //禁用加载遮罩，防止跳转时页面卡顿，使用统一的遮罩效果

28         emptyText: '没有更多内容了'

29     }

30 });

一个list这样就可以了

 1 Ext.define('app.view.job.StaffList', {

 2     alternateClassName: 'staffList',

 3     extend: 'app.view.util.MyList',

 4     requires: ['app.view.job.StaffInfo'],

 5     xtype: 'staffList',

 6     config: {

 7         itemHeight:68,

 8         store: 'staffList',

 9         itemTpl: new Ext.XTemplate(

10         '<div class="left">',

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

12         '</div>',

13         '<div class="right"><div class="row grayF">{refreshtime}</div><div class="row sm orangeF">{intention_jobs}</div></div>')

14     }

15 });

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