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 ...
随机推荐
- CentOS, 高速设置ssh无password登录
首先.保证能够ping通 然后运行例如以下命令, master登录slave master上面运行例如以下指令: 2.4 确认本机sshd的配置文件(root) $ vi/etc/ssh/sshd_c ...
- [置顶] 如何在Windows 7 64位安装Python,并使用Matplotlib绘图
1. 安装Python 我使用的是Windows 7 64 bit,所以我从Python官网下载python-2.7.5.amd64.msi,安装步骤如下: 1) 安装windo ...
- Qt5官方demo分析集11——Qt Quick Particles Examples - Affectors
在这个系列中的所有文章都可以在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873 接上文Qt5官方demo解析集10--Qt ...
- HDU 3032 Nim or not Nim? (sg函数求解)
Nim or not Nim? Problem Description Nim is a two-player mathematic game of strategy in which players ...
- 页面布局之BFC 微微有点坑
一.什么是BFC: 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...
- [译]SSIS 通过环境变量配置数据源连接参数
场景 希望在包执行的时候可以随意选择参数,这时候我们可以用环境变量 . 另外所有包都可以用环境变量,有大量包的时候就比较方便. Step 1: 创建SSIS包 在Data Flow Task里面创建 ...
- plsql 的循环之 goto
实例: /* 测试goto 的用法, */ procedure test_loop_go(pi_aab001 in number, po_fhz out varchar2, po_msg out va ...
- php随机10-thinkphp 3.1.3 模板继承 布局
8.25 模板继承 模 板继承是3.1.2版本添加的一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比类 的继承一样,模板也可以定义一个 ...
- Objective-C 程序设计第四版 二
1,%@ 是用于输出OC里面的对象.例如 NSString *str = @“ls kd kd kf ”; NSLog(@“%@“, str); 2,NSInteger不是一个对象,而是基本数据类型 ...
- window下nodejs安装指南
相信对于很多关注javascript发展的同学来说,nodejs已经不是一个陌生的词眼.有关nodejs的相关资料网上已经铺天盖地.由于它的高并发特性,造就了其特殊的应用地位. 国内目前关注最高,维护 ...