需要多次显示同一套组件的地方都可以用数据视图，例如下面的几个应用：
邮件应用里的消息列表
显示最新的新闻/即时消息
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，让列表是我们想要的样式。
