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