Sencha Touch 2.0官方指南:如何使用数据视图

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

邮件应用里的消息列表

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

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