偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

Sencha Touch 2.0官方指南:如何使用數(shù)據(jù)視圖

移動(dòng)開發(fā)
數(shù)據(jù)視圖可以很方便地動(dòng)態(tài)創(chuàng)建大量組件,通常取決于一個(gè)Store。強(qiáng)大的數(shù)據(jù)翻譯功能,可以翻譯從服務(wù)后臺(tái)或是任何其他數(shù)據(jù)源取得的數(shù)據(jù),像組件Ext.List。

需要多次顯示同一套組件的地方都可以用數(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è)條目:

  1. var touchTeam = Ext.create('Ext.DataView', { 
  2.  
  3. store: { 
  4.  
  5. fields: ['name', 'age'], 
  6.  
  7. data: [ 
  8.  
  9. {name: 'Jamie Avins', age: 100}, 
  10.  
  11. {name: 'Rob Dougan', age: 21}, 
  12.  
  13. {name: 'Tommy Maintz', age: 24}, 
  14.  
  15. {name: 'Jacky Nguyen', age: 24}, 
  16.  
  17. {name: 'Ed Spencer', age: 26} 
  18.  
  19.  
  20. }, 
  21.  
  22. itemConfig: { 
  23.  
  24. tpl: '{name} is {age} years old' 
  25.  
  26.  
  27. }); 

這里我們把每個(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ù)視圖:

  1. touchTeam.getStore().add({ 
  2.  
  3. name: 'Abe Elias', 
  4.  
  5. age: 33 
  6.  
  7. }); 

我們不用手動(dòng)更新數(shù)據(jù)視圖,它會(huì)自動(dòng)更新。同樣,如果我們修改一條Store中已經(jīng)存在的記錄:

  1. 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和條目配置:

  1. Ext.create('Ext.DataView', { 
  2. fullscreen: true, 
  3. store: { 
  4. autoLoad: true, 
  5. fields: ['from_user', 'text', 'profile_image_url'], 
  6. proxy: { 
  7. type: 'jsonp', 
  8. url: 'http://search.twitter.com/search.json?q=Sencha Touch', 
  9. reader: { 
  10. type: 'json', 
  11. root: 'results' 
  12. }, 
  13. itemConfig: { 
  14. tpl: '<img src="{profile_image_url}" /><h2>{from_user}</h2><p>{text}</p>
  15. }); 

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

責(zé)任編輯:佚名 來(lái)源: 移動(dòng)Web開發(fā)社區(qū)
相關(guān)推薦

2011-10-26 10:43:19

Sencha Touc

2011-10-26 10:21:40

Sencha Touc組件

2012-01-10 13:21:33

Sencha Touc使用data包

2011-10-18 09:49:40

新特征Sencha Touc

2011-09-02 15:18:49

Sencha Touc

2011-07-25 16:21:22

Sencha touc

2011-10-26 10:12:53

Sencha Touc布局

2011-09-02 15:42:55

Sencha Touc布局

2011-09-30 14:15:10

Sencha ToucSencha Touc

2011-09-02 15:58:38

Sencha Touc布局

2012-05-01 20:57:26

Sencha Touc

2011-10-18 08:59:46

Sencha ToucHTML5

2011-11-16 13:14:02

Sencha TouciOS本地應(yīng)用

2011-07-26 09:41:50

Sencha Touc特性HTML 5

2010-11-22 10:31:17

Sencha touc

2011-09-02 16:08:09

Sencha ToucAPI文檔

2011-07-25 15:55:21

Sencha ToucHtml 5

2011-09-05 11:23:26

EclipseSencha Touc框架

2011-09-02 16:42:51

Sencha ToucWeb應(yīng)用

2011-09-05 10:20:21

Sencha ToucAPP
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)