sencha touch笔记(5)——DataView组件(1)
1.DataView组件可以显示列表,图像等等的组件或者元素,特别适用于数据仓库频繁更新的情况。比如像显示新闻或者微博等等的很多相同样式的组件的列表这种一次性从后台或者数据源拿取很多数据展示的样式。比如官网给的简单的示例:
var touchTeam = Ext.create('Ext.DataView', {
fullscreen: true,
store: {
fields: ['name', 'age'],
data: [
{name: 'Jamie', age: 100},
{name: 'Rob', age: 21},
{name: 'Tommy', age: 24},
{name: 'Jacky', age: 24},
{name: 'Ed', age: 26}
]
}, itemTpl: '<div>{name} is {age} years old</div>'
});
DataView组件是和 Store组件紧密联系在一起的。当Data组件中的数据发生变化时,也会迅速的反应在DataView的组件上面。
2.Ext.data.Model是 M层,也就是数据层。
在想要被展示在UI上面时,它应该被Store组件所使用。官网给的示例代码:
Ext.define('User', { //定义一个model
extend: 'Ext.data.Model', config: {
fields: [ //fields代表model的所有实例所遵循的模式
{name: 'name', type: 'string'},
{name: 'age', type: 'int'},
{name: 'phone', type: 'string'},
{name: 'alive', type: 'boolean', defaultValue: true}
]
}, changeName: function() {
var oldName = this.get('name'),
newName = oldName + " The Barbarian"; this.set('name', newName);
}
});
3.Ext.data.Store, Store通过Proxy来获取加载数据,可以用来将数据展示在Ui上, 直观点讲store就是用model的数据组织模式通过proxy来加载数据,最后展示在UI里面。所以在 创建一个store的时候只需要告诉它所需要的model模型和加载时候通过的proxy即可。还是看官网给的示例代码:
// Set up a model to use in our Store
Ext.define("User", {
extend: "Ext.data.Model",
config: {
fields: [
{name: "firstName", type: "string"},
{name: "lastName", type: "string"},
{name: "age", type: "int"},
{name: "eyeColor", type: "string"}
]
}
}); var myStore = Ext.create("Ext.data.Store", {
model: "User", //指定引用所需的model
pageSize:7,//pageSize的作用并不是指在list中每次显示多少条数据,而是告诉后台你每次要显示多少条数据,应该要和后台相结合的时候才会显示出效果来
proxy: { //指定proxy
type: "ajax", //AJAX从指定的路径加载数据
url : "/users.json",
reader: {
type: "json",
rootProperty: "users"
}
},
autoLoad: true
}); Ext.create("Ext.List", {
fullscreen: true,
store: myStore,
itemTpl: "{lastName}, {firstName} ({age})"
});
sencha touch笔记(5)——DataView组件(1)的更多相关文章
- Sencha touch 2 入门 -------- DataView 显示服务器端JSON文件数据
今天学习了下DataView如何显示JSON文件数据,废话不多说,直接贴代码: 首先看下文件目录: 然后看下我们要处理的JSON文件,bookInfo.json. { "success&qu ...
- sencha touch笔记(6)——路由控制(1)
做项目的时候在界面的跳转上遇到了挺大的问题,本来跳转不想通过路由来控制的,没办法,只能再去看一下路由的跳转方式了. 应用程序的界面发生改变后,可以通过路由让应用程序的界面返回到改变之前的状态,例如浏览 ...
- 【翻译】探究Ext JS 5和Sencha Touch的布局系统
原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每 ...
- 【转载】Sencha Touch 提高篇 组件选择器
免责声明: 本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除. 原文作者:威老 原文地址:http://www.cnblogs.com/weil ...
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包 在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...
- sencha touch 入门系列 (九)sencha touch 视图组件简介
对于一个普通用户来说,你的项目就是一组简单的视图集合,用户直接通过跟视图进行交互来操作你的应用,对于一个开发人员来说,视图是一个项目的入口,虽然大部分时候最有价值的部分是在model层和control ...
- sencha touch 组件选择器getCmp和ComponentQuery.query()的效率解析
昨天无意中在网上看到一篇讲解sencha touch组件选择器的文章,名为 Sencha touch 2通过Ext.ComponentQuery.query查找组件. 里面对组件选择器的效率讲解完全反 ...
- sencha touch(7)——list组件
1.list组件是一个很强大的组件.用于以一览表的形式或者列表的形式展示应用程序中的大量的数据.该组件使用XTemplate模版来显示数据,同时与数据仓库进行绑定.所以当数据仓库中的数据发生变化的时候 ...
- sencha touch的开源插件和例子
写了好久的sencha touch,没想到换工作竟然一年多没有搞了.因为项目的缘故收集了好多的组件,由于懒惰,没有整理,现在想想有点后悔了,再加上如果就这样丢弃,感觉有些遗憾,今天整理了一下放在git ...
随机推荐
- Knockout快速扫盲
1.Knockout.js是什么? Knockout是一款很优秀的js库,它可以快速让你使用一个干净整洁的底层数据模型,即可创建一个富文本且具有良好显示和编辑功能的用户界面.任何时候你的ui需要自 ...
- ASP.NET 母版页和内容页的加载顺序
Master 模板页Content 内容页如果希望Master页面的数据传给Content页面,请Init如果希望Content页面的数据传给Master页面,请重载Load具体细节不多说了,看下面页 ...
- CSS的position(位置)
position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...
- centos6.5配置163的yum源
CentOS系统自带的更新源的速度实在是慢,为了让CentOS6使用速度更快的YUM更新源,可以选择163(网易)的更新源. 1.下载repo文件 wget http://mirrors.163.co ...
- 我的Python成长之路---第七天---Python基础(21)---2016年2月27日(晴)
四.面向对象进阶 1.类方法 普通的方法通过对象调用,至少有一个self参数(调用的时候系统自动传递,不需要手工传递),而类方法由类直接调用,至少有一个cls参数,执行时,自动将调用该方法的类赋值个c ...
- 无法更新 EntitySet“GuigeInfo”,因为它有一个 DefiningQuery,而 <ModificationFunctionMapping> 元素中没有支持当前操作的 <InsertFunction> 元素。
1:实体中必须有主键 2:删除创建的模型重新创建
- 服务器端开发(Python/C++)-今日头条-拉勾网-最专业的互联网招聘平台
服务器端开发(Python/C++)-今日头条-拉勾网-最专业的互联网招聘平台 服务器端开发(Python/C++)
- 小米2s的座充,看看这个是什么芯片? - 电池&综合DIY(Flashlight Electronics-Batteries Include - 手电大家谈-手电筒爱好者之家
小米2s的座充,看看这个是什么芯片? - 电池&综合DIY(Flashlight Electronics-Batteries Include - 手电大家谈-手电筒爱好者之家 小米2s的座充, ...
- CentOS6.4关闭触控板
1. 检查是否安装xorg-x11-app; rpm -qa xorg-x11-apps 如果没有安装使用下面命令安装xorg-x11-app yum install xorg-x11-apps 2. ...
- 正确的lnamp支持SSI的方法!即支持SHTML和include调用!
正确的lnamp支持SSI的方法!即支持SHTML和include调用! 个地方:一个是apache和nginx里的conf文件 第一步:修改apache里的httpd.conf文件 查找:AddTy ...