現(xiàn)在很多朋友與同學(xué),都說EXTJS最難的是數(shù)據(jù)交互部分。其實(shí)不然，因?yàn)槲夷壳拔覍?duì)EXTJS的研究來看，這個(gè)典型富客戶端的應(yīng)用框架，目前能夠支持的也就是兩種中間數(shù)據(jù)交換結(jié)構(gòu)，即XML與JSON。再?gòu)奈覀儸F(xiàn)在主流的企業(yè)級(jí)應(yīng)用開發(fā)語(yǔ)系來看，目前.NET官方是偏重于支持XML的形式，而 Java語(yǔ)系則偏重于支持JSON的形式。其實(shí)兩種對(duì)于EXTJS來說，都是很簡(jiǎn)單的。那么現(xiàn)在為什么大家都認(rèn)為這塊最難呢？我認(rèn)為，其實(shí)不是難，是煩！因?yàn)?，你在調(diào)試將客戶端與服務(wù)器端進(jìn)行整合，你需要至少需要了解兩大塊語(yǔ)系，一個(gè)客戶端的EXTJS語(yǔ)系，一個(gè)是你服務(wù)器端的語(yǔ)系。這樣，對(duì)于開發(fā)人員也就提出了很高的技術(shù)應(yīng)用要求。

對(duì)于服務(wù)器端的調(diào)試與開發(fā)，這塊暫時(shí)不談，因此太多、太雜，隨便說幾個(gè)，大家可能就會(huì)暈倒了，Java語(yǔ)系方面的，DWR、SSH；Net語(yǔ)系方面的，WCF；Ruby語(yǔ)系方向的，Ruby on Rails ;ASP語(yǔ)系方面的，ASPServer等等，不勝枚舉，再加上，目前，AJAX應(yīng)用層面，尚未有一個(gè)完善的標(biāo)準(zhǔn)體系，使得大家的學(xué)習(xí)成本大幅度增加。

雖然EXTJS也就不太標(biāo)準(zhǔn)，甚至出現(xiàn)API文檔與實(shí)際運(yùn)用不符的現(xiàn)象，但是，不管怎么說，EXTJS是一個(gè)語(yǔ)言體系，作為一門現(xiàn)在最優(yōu)秀的AJAX富客戶端框架，是值得我們學(xué)習(xí)的。

好，我們言歸正傳，我這篇文章就是為了解決大家對(duì)于EXTJS數(shù)據(jù)存儲(chǔ)機(jī)制的很少疑惑。應(yīng)該說，“學(xué)語(yǔ)言，看代碼”是一種很好的學(xué)習(xí)機(jī)制，但是，現(xiàn)在目前由于SDK自帶事例，導(dǎo)致大家對(duì)于EXTJS的存儲(chǔ)使用上，存在很大的局限性。

第一，讓我們了解一樣EXTJS數(shù)據(jù)存儲(chǔ)框架是什么樣子的。

大家對(duì)于Ext.data.Store不陌生吧，現(xiàn)在網(wǎng)上大大小小免費(fèi)的、或是收費(fèi)的教程，大多會(huì)經(jīng)常出個(gè)這個(gè)Store.這個(gè)就是EXTJS的數(shù)據(jù)存儲(chǔ)器。他負(fù)責(zé)管理與存儲(chǔ)數(shù)據(jù)。

Ext.data.Record，大家也不應(yīng)該陌生，他是一個(gè)存儲(chǔ)數(shù)據(jù)的記錄，類似于表中的“行記錄”，Store里面的基本數(shù)據(jù)單元對(duì)象就是Record。

那Store是如何對(duì)于Record進(jìn)行管理呢？首先，我們得解決第一個(gè)問題，如果實(shí)例化一個(gè)Record對(duì)象？

官方的推薦初始化方式有兩種：

1、var _rs = new Ext.data.Record(["name" , "sex"]) ;//定義兩個(gè)字段名，分別是name、sex

_rs.set("name" , "陳治文");//設(shè)置name為"陳治文"

_rs.set("sex" , "男");//設(shè)置sex為"男"

注：這種寫法，一目了然，但是，太過冗長(zhǎng)。

2、var _rs = new Ext.data.Record({

                     name:"陳治文",

                    sex:"男"

}) ;

注：這種寫法，是我推薦的寫法，很簡(jiǎn)結(jié)。

好第一個(gè)問題解決了，那么我們?nèi)绾纬跏蓟粋€(gè)Store呢？很簡(jiǎn)單，一句話

var _store = new Ext.data.Store() ;

我們繼續(xù)，將上面的Record添加進(jìn)Store

var _store = new Ext.data.Store() ;
   
   _store.add(new Ext.data.Record({

                     name:"陳治文",

                    sex:"男"

   })) ;

好！OK了，一條記錄已經(jīng)添加進(jìn)Store

這寫法方便、實(shí)用，但是需要添加一組數(shù)據(jù)怎么辦呢？這就需要引入另外一個(gè)概念Ext.data.Reader,這里的Reader功能非常單一，只是用來解析數(shù)據(jù)的。大家在文章開始時(shí)，就應(yīng)該體會(huì)到，EXTJS支持不同的數(shù)據(jù)格式，也就需要不同的數(shù)據(jù)解析器。而這個(gè)Reader就是承擔(dān)解析器的作用。

那我們就看一看，不同的解析器，能夠解析哪些數(shù)據(jù)格式。在解析之前，還有一點(diǎn)需要說明一下，Store里面組織Record是通過集合形式組織的，體現(xiàn)為JavaScript的Array（注：Javascript沒有集合類，所有的集合形式是都是數(shù)組實(shí)現(xiàn)的），而解析器的作用是把一組數(shù)據(jù)解析成一個(gè)個(gè)的Record。

1、數(shù)組形式數(shù)據(jù)解析（特殊的JSON形式數(shù)據(jù)，因此，ArrayReader是JsonReader的子類）

var _store = new Ext.data.Store({
        data:[["陳治文" , "男"] , ["張妍娜" , "女"]],
        reader:new Ext.data.ArrayReader({
             },Ext.data.Record.create(["name" , "sex"]))
        }) ;

解析器為ArrayReader，分別解析["陳治文" , "男"] 和["張妍娜" , "女"]，將其轉(zhuǎn)換成Ext.data.Record。

2、JSON形式數(shù)據(jù)

var _store = new Ext.data.Store({
         data:[{name:"陳治文" , sex:"男"} , {name:"張妍娜" , sex:"女"}],
         reader:new Ext.data.JsonReader({
              } , Ext.data.Record.create(["name" , "sex"]))
         }) ;
        
   alert(_store.getCount()) ;

JsonReader分別解析{name:"陳治文" , sex:"男"}和{name:"張妍娜" , sex:"女"}，將這些數(shù)據(jù)解析成Ext.data.Record類型數(shù)據(jù)

3、XML形式數(shù)據(jù)

這里的有個(gè)地方比較麻煩，首先，我們必須得構(gòu)建一個(gè)ＸＭＬDocument，這樣才能形成ＸＭＬ數(shù)據(jù)，我們這里所講的是ＡＳＰServer的ＸＭＬ組織形式

var _xml = new XML("<table><row><name>陳治文</name><sex> 男</sex></row><row><name>張妍娜< /name><sex>女</sex></row></table>") ;

這樣，就是構(gòu)建一個(gè)ＸＭＬ對(duì)象，通過_xml.getValue（）得到xmldocument原型

再者，我們還有需要引入一個(gè)新型概念——數(shù)據(jù)代理Ext.data.DataProxy,數(shù)據(jù)代理的作用就是通過一定的方式來獲得數(shù)據(jù)，目前ＥＸＴＪＳ提供三種方式獲得數(shù)據(jù)：內(nèi)存?zhèn)魅?、ＨＴＴＰ傳入、跨域傳入。我這里所講是內(nèi)存?zhèn)魅隕xt.data.MemoryProxy

var _store = new Ext.data.Store({
        proxy:new Ext.data.MemoryProxy(_xml.getValue()) ,
        reader:new Ext.data.XmlReader({
              record:"row"
             },Ext.data.Record.create(["name" , "sex"]))
        }) ;
        
   _store.on("load" , function(_store){
         
         alert(_store.getAt(0).getCount()) ;
         
          }) ;
        
   _store.load() ;

由于當(dāng)時(shí)，使用了數(shù)據(jù)代理，需要一個(gè)顯式調(diào)用載入方法，因此，我們通過一個(gè)load事件，來獲得載入后Store內(nèi)部所包含Record的總量

剛才所講，已經(jīng)將EXTJS能夠解析的數(shù)據(jù)形成都講一遍，但是，在我們大多數(shù)的應(yīng)用中，我們的數(shù)據(jù)是來自服務(wù)器端，而不是客戶端本身。其實(shí)在上面講解ＸＭＬ數(shù)據(jù)解析時(shí)，我已經(jīng)講到，這樣的要求，需要通過數(shù)據(jù)代理來實(shí)現(xiàn)。

1、通過Ext.data.HttpProxy來實(shí)現(xiàn)XML的遠(yuǎn)程訪問

來自http://localhost/document/server/app/console.asp的數(shù)據(jù)返回

<?xml version="1.0" encoding="GB2312"?>
<table>
 <row>
  <name><![CDATA[陳治文]]></name>
  <sex><![CDATA[男]]></sex>
 </row>
 <row>
  <name><![CDATA[張妍娜]]></name>
  <sex><![CDATA[女]]></sex>
 </row>
</table>

客戶端程序

var _store = new Ext.data.Store({
         proxy:new Ext.data.HttpProxy({
             http://www.dojochina.com/%22http://localhost/document/server/app/console.html"
             }),
         reader:new Ext.data.XmlReader({
             record:"row"
              } , Ext.data.Record.create(["name" , "sex"]))
         }) ;
   _store.on("load" , function(_store){
         
         alert(_store.getAt(0).get("name")) ;
         
          }) ;
        
   _store.load() ;

2、通過Ext.data.HttpProxy來實(shí)現(xiàn)JSON的遠(yuǎn)程訪問

ＪＳＯＮ的結(jié)構(gòu)，基本上與ＸＭＬ差不多，ＸＭＬ講究節(jié)點(diǎn)集，而ＪＳＯＮ研究數(shù)組集

來自http://localhost/document/server/app/console.asp的數(shù)據(jù)返回

[{name:"陳治文" , sex:"男"},{name:"張妍娜" , sex:"女"}]

客戶端程序

var _store = new Ext.data.Store({
         proxy:new Ext.data.HttpProxy({
             http://www.dojochina.com/%22http://localhost/document/server/app/console.html"
             }),
         reader:new Ext.data.JsonReader({
              } , Ext.data.Record.create(["name" , "sex"]))
         }) ;
   _store.on("load" , function(_store){
         
         alert(_store.getCount()) ;
         
          }) ;
        
   _store.load() ;

好，這樣也就可以了，與XML的解析十分相似

3、跨域數(shù)據(jù)代理數(shù)據(jù)傳入

這塊內(nèi)容很特殊，即當(dāng)前客戶端所訪問的服務(wù)器端，并不是與當(dāng)前客戶端所處一域的服務(wù)器端，如果你使用HttpProxy,會(huì)出現(xiàn)“沒有權(quán)限”的錯(cuò)誤信息，這也是“同源策略”的ＡＪＡＸ安全策略，為了得到跨域數(shù)據(jù)訪問，ＥＸＴＪＳ提供了Ext.data.ScriptTagProxy來解決這個(gè)問題，其它的，與其它數(shù)據(jù)代理沒有什么兩樣。

介紹到這里，大家已經(jīng)到ＥＸＴＪＳ數(shù)據(jù)存儲(chǔ)有了一個(gè)全新的認(rèn)識(shí)了吧，當(dāng)然，這個(gè)介紹仍然很簡(jiǎn)單，我將在教程10、11，以及以后的關(guān)于FormPanel與GridPanel反復(fù)提及這些概念，使得大家充分利用ＥＸＴＪＳ數(shù)據(jù)存儲(chǔ)的優(yōu)越特性。