Sencha Touch 2.0官方指南:如何使用數(shù)據(jù)視圖
需要多次顯示同一套組件的地方都可以用數(shù)據(jù)視圖，例如下面的幾個應(yīng)用：
郵件應(yīng)用里的消息列表
顯示最新的新聞/即時消息
HTML5音樂播放器上的平鋪相冊
創(chuàng)建簡單數(shù)據(jù)視圖
簡單地說，數(shù)據(jù)視圖就是一個裝滿數(shù)據(jù)和一個簡單模板的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'
- }
- });
這里我們把每個都定義成內(nèi)聯(lián)的，這樣他們都是本地的，不用從服務(wù)器加載。在Store里定義的每個條目(共5個)，數(shù)據(jù)視圖會提供一個組件并把姓名和年齡數(shù)據(jù)傳進去。該組件會用到我們在上面提供的tpl，翻譯{｝里面的數(shù)據(jù)。
因為數(shù)據(jù)視圖和Store集成在一起，任何對Store的改動都會立即反映到屏上。例如，如果我們向Store中加入一條新記錄，這條記錄會被加進數(shù)據(jù)視圖：
- touchTeam.getStore().add({
- name: 'Abe Elias',
- age: 33
- });
我們不用手動更新數(shù)據(jù)視圖，它會自動更新。同樣，如果我們修改一條Store中已經(jīng)存在的記錄：
- touchTeam.getStore().getAt(0).set('age', 42);
將會取得Store中的第一個數(shù)據(jù)(Jamie)，把年齡改成42，然后自動更新到屏上。
從服務(wù)器上加載數(shù)據(jù)
我們經(jīng)常從服務(wù)器或其他web服務(wù)上加載數(shù)據(jù)，這樣我們就不用本地硬編碼。假如我們要把所有關(guān)于Sencha Touch的最新的即時消息加載進數(shù)據(jù)視圖，而且為每個消息提供用戶的資料圖片、用戶名和即時消息。所有這些我們只要稍微修改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不含硬編碼數(shù)據(jù)，相應(yīng)的我們只要提供一個代理為我們抓取數(shù)據(jù)。在這個例子里，我們使用了一個JSON-P代理從Twitter的JSON-P搜索API中加載數(shù)據(jù)。我們也定義了每條即時消息的字段，使用Store的autoLoad配置來自動加載。最后，我們配置一個讀碼器來解碼從Twitter來的反饋，傳給期望的JSON，會在JSON響應(yīng)的‘results’部分發(fā)現(xiàn)即時消息。
我們要做的最后一件事就是更新我們的模板來提供圖像，twitter用戶名和消息?，F(xiàn)在我們需要做的所有事就是加一些CSS，讓列表是我們想要的樣式。
