Sencha Touch开发实例：新浪微博iPhone界面

需要多次显示同一套组件的地方都可以用数据视图，例如下面的几个应用：

邮件应用里的消息列表

显示最新的新闻/即时消息

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，让列表是我们想要的样式。