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，讓列表是我們想要的樣式。
