sencha touch list(列表)、 store(数据源)、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>')
}
});
大概就是这样吧,附图一张
转自:http://www.cnblogs.com/mlzs/p/3169893.html
sencha touch list(列表)、 store(数据源)、model(模型)详解的更多相关文章
- ASP.NET Core的配置(2):配置模型详解
在上面一章我们以实例演示的方式介绍了几种读取配置的几种方式,其中涉及到三个重要的对象,它们分别是承载结构化配置信息的Configuration,提供原始配置源数据的ConfigurationProvi ...
- <转>ASP.NET学习笔记之MVC 3 数据验证 Model Validation 详解
MVC 3 数据验证 Model Validation 详解 再附加一些比较好的验证详解:(以下均为引用) 1.asp.net mvc3 的数据验证(一) - zhangkai2237 - 博客园 ...
- 云时代架构阅读笔记六——Java内存模型详解(二)
承接上文:云时代架构阅读笔记五——Java内存模型详解(一) 原子性.可见性.有序性 Java内存模型围绕着并发过程中如何处理原子性.可见性和有序性这三个特征来建立的,来逐个看一下: 1.原子性(At ...
- css 06-CSS盒模型详解
06-CSS盒模型详解 #盒子模型 #前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张 ...
- ISO七层模型详解
ISO七层模型详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在我刚刚接触运维这个行业的时候,去面试时总是会做一些面试题,笔试题就是看一个运维工程师的专业技能的掌握情况,这个很 ...
- 28、vSocket模型详解及select应用详解
在上片文章已经讲过了TCP协议的基本结构和构成并举例,也粗略的讲过了SOCKET,但是讲解的并不完善,这里详细讲解下关于SOCKET的编程的I/O复用函数. 1.I/O复用:selec函数 在介绍so ...
- 第94天:CSS3 盒模型详解
CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...
- JVM的类加载过程以及双亲委派模型详解
JVM的类加载过程以及双亲委派模型详解 这篇文章主要介绍了JVM的类加载过程以及双亲委派模型详解,类加载器就是根据指定全限定名称将 class 文件加载到 JVM 内存,然后再转化为 class 对象 ...
- 图解机器学习 | LightGBM模型详解
作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/34 本文地址:http://www.showmeai.tech/article-det ...
随机推荐
- Flash相关知识
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" wid ...
- 中科院Oracle 10G 数据库系统培训视频教程(828MB )
中科院Oracle 10G 数据库系统培训视频教程(828MB )第一章.安装及体系结构概述 Oracle数据库基础知识第二章.SQL*PLUS 基础.实例的创建启动与关闭第三章.SQL语言基础第四 ...
- GEOS库的学习之二:简单几何图形的创建
几何图形(Geometry)是geos里面基本的操作对象,因此Geometry类就是最重要的一个类 几何图形中主要有三个要素:点,线,面.横纵坐标构成点,多个点构成线,环线构成面,点线面混合构成几何集 ...
- [MetaHook] R_SparkEffect
By hzqst void R_SparkEffect(float *pos, int count, int velocityMin, int velocityMax) { efx.R_SparkSt ...
- 第十章 系统级I/O
第十章 系统级I/O 一.Unix I/O 1.一个unix文件就是一个m个字节的序列 2.unix外壳创建的每个进程开始时都有三个打开的文件:标准输入(0) .标准输出(1)和标准错误(-1). 二 ...
- php中的错误级别
在php编程过程中,大家一定会遇到或多或少的错误提醒,也正是这些错误提示,指引我们编写更加干净的代码,今天先写出我们主要列出的错误类型,先挖坑,写关于php错误与异常的相关知识,慢慢填坑. De ...
- javaWeb开发模式
1.发展历程 2.模式分析 JSP+JavaBean模式适合开发业务逻辑不太复杂的web服务程序.这种模式下,JavaBean用于封装业务数据,JSP即负责处理用户请求,又显示数据(JSP编写业务逻辑 ...
- JSON Web Token - 在Web应用间安全地传递信息(zhuan)
来自 http://blog.leapoahead.com/2015/09/06/understanding-jwt/ JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使用 ...
- ansible-3 主机清单hosts的设置
主机清单的设置参考:http://www.ansible.com.cn/docs/intro_inventory.html [ceshi]192.168.220.98log ansible_ssh_h ...
- iOS不得姐项目--推荐关注模块(一个控制器控制两个tableView),数据重复请求的问题,分页数据的加载,上拉下拉刷新(MJRefresh)
一.推荐关注模块(一个控制器控制两个tableView) -- 数据的显示 刚开始加载数据值得注意的有以下几点 导航控制器会自动调整scrollView的contentInset,最好是取消系统的设置 ...