先从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 });
大概就是这样吧，附图一张
