zoukankan      html  css  js  c++  java
  • 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形式数据

    这里的有个地方比较麻烦,首先,我们必须得构建一个XMLDocument,这样才能形成XML数据,我们这里所讲的是ASPServer的XML组织形式

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

    这样,就是构建一个XML对象,通过_xml.getValue()得到xmldocument原型

    再者,我们还有需要引入一个新型概念——数据代理Ext.data.DataProxy,数据代理的作用就是通过一定的方式来获得数据,目前EXTJS提供三种方式获得数据:内存传入、HTTP传入、跨域传入。我这里所讲是内存传入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能够解析的数据形成都讲一遍,但是,在我们大多数的应用中,我们的数据是来自服务器端,而不是客户端本身。其实在上面讲解XML数据解析时,我已经讲到,这样的要求,需要通过数据代理来实现。

    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的远程访问

    JSON的结构,基本上与XML差不多,XML讲究节点集,而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,会出现“没有权限”的错误信息,这也是“同源策略”的AJAX安全策略,为了得到跨域数据访问,EXTJS提供了Ext.data.ScriptTagProxy来解决这个问题,其它的,与其它数据代理没有什么两样。

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

  • 相关阅读:
    bzoj3622: 已经没有什么好害怕的了
    BSGS
    LOJ#2320 生成树计数
    ??? cliquers
    生成函数
    洛谷P5206 数树
    01分数规划
    差分约束系统
    51nod1238 最小公倍数之和 V3
    51nod1237 最大公约数之和 V3
  • 原文地址:https://www.cnblogs.com/haoliansheng/p/1457726.html
Copyright © 2011-2022 走看看