EXTJS的数据存储机制

 

现在很多朋友与同学,都说EXTJS最难的是数据交互部分。其实不然，因为我目前我对EXTJS的研究来看，这个典型富客户端的应用框架，目前能够支持的也就是两种中间数据交换结构，即XML与JSON。再从我们现在主流的企业级应用开发语系来看，目前.NET官方是偏重于支持XML的形式，而 Java语系则偏重于支持JSON的形式。其实两种对于EXTJS来说，都是很简单的。那么现在为什么大家都认为这块最难呢？我认为，其实不是难，是烦！因为，你在调试将客户端与服务器端进行整合，你需要至少需要了解两大块语系，一个客户端的EXTJS语系，一个是你服务器端的语系。这样，对于开发人员也就提出了很高的技术应用要求。

对于服务器端的调试与开发，这块暂时不谈，因此太多、太杂，随便说几个，大家可能就会晕倒了，Java语系方面的，DWR、SSH；Net语系方面的，WCF；Ruby语系方向的，Ruby on Rails ;ASP语系方面的，ASPServer等等，不胜枚举，再加上，目前，AJAX应用层面，尚未有一个完善的标准体系，使得大家的学习成本大幅度增加。

虽然EXTJS也就不太标准，甚至出现API文档与实际运用不符的现象，但是，不管怎么说，EXTJS是一个语言体系，作为一门现在最优秀的AJAX富客户端框架，是值得我们学习的。

好，我们言归正传，我这篇文章就是为了解决大家对于EXTJS数据存储机制的很少疑惑。应该说，“学语言，看代码”是一种很好的学习机制，但是，现在目前由于SDK自带事例，导致大家对于EXTJS的存储使用上，存在很大的局限性。

第一，让我们了解一样EXTJS数据存储框架是什么样子的。

大家对于Ext.data.Store不陌生吧，现在网上大大小小免费的、或是收费的教程，大多会经常出个这个Store.这个就是EXTJS的数据存储器。他负责管理与存储数据。

Ext.data.Record，大家也不应该陌生，他是一个存储数据的记录，类似于表中的“行记录”，Store里面的基本数据单元对象就是Record。

那Store是如何对于Record进行管理呢？首先，我们得解决第一个问题，如果实例化一个Record对象？

官方的推荐初始化方式有两种：

1、var _rs = new Ext.data.Record(["name" , "sex"]) ;//定义两个字段名，分别是name、sex

_rs.set("name" , "陈治文");//设置name为"陈治文"

_rs.set("sex" , "男");//设置sex为"男"

注：这种写法，一目了然，但是，太过冗长。

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

                     name:"陈治文",

                    sex:"男"

}) ;

注：这种写法，是我推荐的写法，很简结。

好第一个问题解决了，那么我们如何初始化一个Store呢？很简单，一句话

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

我们继续，将上面的Record添加进Store

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

                     name:"陈治文",

                    sex:"男"

   })) ;

好！OK了，一条记录已经添加进Store

这写法方便、实用，但是需要添加一组数据怎么办呢？这就需要引入另外一个概念Ext.data.Reader,这里的Reader功能非常单一，只是用来解析数据的。大家在文章开始时，就应该体会到，EXTJS支持不同的数据格式，也就需要不同的数据解析器。而这个Reader就是承担解析器的作用。

那我们就看一看，不同的解析器，能够解析哪些数据格式。在解析之前，还有一点需要说明一下，Store里面组织Record是通过集合形式组织的，体现为JavaScript的Array（注：Javascript没有集合类，所有的集合形式是都是数组实现的），而解析器的作用是把一组数据解析成一个个的Record。

1、数组形式数据解析（特殊的JSON形式数据，因此，ArrayReader是JsonReader的子类）

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

解析器为ArrayReader，分别解析["陈治文" , "男"] 和["张妍娜" , "女"]，将其转换成Ext.data.Record。

2、JSON形式数据

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:"女"}，将这些数据解析成Ext.data.Record类型数据

3、XML形式数据

这里的有个地方比较麻烦，首先，我们必须得构建一个ＸＭＬDocument，这样才能形成ＸＭＬ数据，我们这里所讲的是ＡＳＰServer的ＸＭＬ组织形式

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

这样，就是构建一个ＸＭＬ对象，通过_xml.getValue（）得到xmldocument原型

再者，我们还有需要引入一个新型概念——数据代理Ext.data.DataProxy,数据代理的作用就是通过一定的方式来获得数据，目前ＥＸＴＪＳ提供三种方式获得数据：内存传入、ＨＴＴＰ传入、跨域传入。我这里所讲是内存传入Ext.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() ;

由于当时，使用了数据代理，需要一个显式调用载入方法，因此，我们通过一个load事件，来获得载入后Store内部所包含Record的总量

刚才所讲，已经将EXTJS能够解析的数据形成都讲一遍，但是，在我们大多数的应用中，我们的数据是来自服务器端，而不是客户端本身。其实在上面讲解ＸＭＬ数据解析时，我已经讲到，这样的要求，需要通过数据代理来实现。

1、通过Ext.data.HttpProxy来实现XML的远程访问

来自http://localhost/document/server/app/console.asp的数据返回

<?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.asp"
             }),
         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来实现JSON的远程访问

ＪＳＯＮ的结构，基本上与ＸＭＬ差不多，ＸＭＬ讲究节点集，而ＪＳＯＮ研究数组集

来自http://localhost/document/server/app/console.asp的数据返回

[{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.asp"
             }),
         reader:new Ext.data.JsonReader({
              } , Ext.data.Record.create(["name" , "sex"]))
         }) ;
   _store.on("load" , function(_store){
         
         alert(_store.getCount()) ;
         
          }) ;
        
   _store.load() ;

好，这样也就可以了，与XML的解析十分相似

3、跨域数据代理数据传入

这块内容很特殊，即当前客户端所访问的服务器端，并不是与当前客户端所处一域的服务器端，如果你使用HttpProxy,会出现“没有权限”的错误信息，这也是“同源策略”的ＡＪＡＸ安全策略，为了得到跨域数据访问，ＥＸＴＪＳ提供了Ext.data.ScriptTagProxy来解决这个问题，其它的，与其它数据代理没有什么两样。

介绍到这里，大家已经到ＥＸＴＪＳ数据存储有了一个全新的认识了吧，当然，这个介绍仍然很简单，我将在教程10、11，以及以后的关于FormPanel与GridPanel反复提及这些概念，使得大家充分利用ＥＸＴＪＳ数据存储的优越特性。