Sencha Touch开发实例:新浪微博iPhone界面
来源:互联网 发布:c语言中double什么意思 编辑:程序博客网 时间:2024/06/05 09:56
需要多次显示同一套组件的地方都可以用数据视图,例如下面的几个应用:
邮件应用里的消息列表
显示最新的新闻/即时消息
HTML5音乐播放器上的平铺相册
创建简单数据视图
简单地说,数据视图就是一个装满数据和一个简单模板的Store,我们用模板翻译每个条目:
- var touchTeam = Ext.create('Ext.DataView', {
- store: {
- fields: ['name', 'age'],
- data: [
- {name: 'Jamie Avins', age: 100},
- {name: 'Rob Dougan', age: 21},
- {name: 'Tommy Maintz', age: 24},
- {name: 'Jacky Nguyen', age: 24},
- {name: 'Ed Spencer', age: 26}
- ]
- },
- itemConfig: {
- tpl: '{name} is {age} years old'
- }
- });
这里我们把每个都定义成内联的,这样他们都是本地的,不用从服务器加载。在Store里定义的每个条目(共5个),数据视图会提供一个组件并把姓名和年龄数据传进去。该组件会用到我们在上面提供的tpl,翻译{}里面的数据。
因为数据视图和Store集成在一起,任何对Store的改动都会立即反映到屏上。例如,如果我们向Store中加入一条新记录,这条记录会被加进数据视图:
- touchTeam.getStore().add({
- name: 'Abe Elias',
- age: 33
- });
我们不用手动更新数据视图,它会自动更新。同样,如果我们修改一条Store中已经存在的记录:
- touchTeam.getStore().getAt(0).set('age', 42);
将会取得Store中的第一个数据(Jamie),把年龄改成42,然后自动更新到屏上。
从服务器上加载数据
我们经常从服务器或其他web服务上加载数据,这样我们就不用本地硬编码。假如我们要把所有关于Sencha Touch的最新的即时消息加载进数据视图,而且为每个消息提供用户的资料图片、用户名和即时消息。所有这些我们只要稍微修改Store和条目配置:
- Ext.create('Ext.DataView', {
- fullscreen: true,
- store: {
- autoLoad: true,
- fields: ['from_user', 'text', 'profile_image_url'],
- proxy: {
- type: 'jsonp',
- url: 'http://search.twitter.com/search.json?q=Sencha Touch',
- reader: {
- type: 'json',
- root: 'results'
- }
- }
- },
- itemConfig: {
- tpl: '<img src="{profile_image_url}" /><h2>{from_user}</h2><p>{text}</p>'
- }
- });
Store不含硬编码数据,相应的我们只要提供一个代理为我们抓取数据。在这个例子里,我们使用了一个JSON-P代理从Twitter的JSON-P搜索API中加载数据。我们也定义了每条即时消息的字段,使用Store的autoLoad配置来自动加载。最后,我们配置一个读码器来解码从Twitter来的反馈,传给期望的JSON,会在JSON响应的‘results’部分发现即时消息。
我们要做的最后一件事就是更新我们的模板来提供图像,twitter用户名和消息。现在我们需要做的所有事就是加一些CSS,让列表是我们想要的样式。
- Sencha Touch开发实例:新浪微博iPhone界面
- sencha touch实例:微博设置界面
- Sencha Touch开发实例:记事本应用(一)
- Sencha Touch开发实例:记事本应用(二)
- Sencha Touch开发实例:记事本应用
- Sencha+touch+开发指南
- sencha touch 开发顺序
- Sencha Touch 开发入门
- sencha architect开发sencha touch应用注意事项
- WebView开发日志 sencha touch
- Sencha touch 开发 start 1
- phoneGap+sencha touch开发工程
- Sencha Touch开发入门2
- 问卷调查Sencha Touch开发总结
- Sencha Touch开发心得分享
- Sencha Touch 快速入门2.0 第一章 开发Sencha Touch App
- Sencha Touch 快速入门2.0 第一章 开发Sencha Touch App
- Sencha Touch视频教程 Sencha Touch实战OA系统开发
- 用户简单注册
- c指针小结
- Android简单数据存储类SharedPreferences详解及实例(通过“记住密码”功能学习SharedPreferences)
- 从瀑布到敏捷(三)迈出走向敏捷的第一步CI
- 如何禁用VirtualBox的时间同步
- Sencha Touch开发实例:新浪微博iPhone界面
- GAE 的探索与总结
- ISTQB AL-TM认证中文参考书:《软件测试管理》连载系列
- 好好学习
- JTAG ISP和Debugwire的异同
- 视图中的with check option
- CentOS 5.7安装eAccelerator
- 命令行查看端口号被哪个进程占用
- 12306网络订票系统登录提示解决方案