zoukankan      html  css  js  c++  java
  • extJS 中 ext.data 介绍

    ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来,于是,Ext.data成了数据的来源,负责显示数据。

    Ext.data在命名空间中定义了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data为媒介获取数据的,它包含异步加载、类型转换、分页等功能。

    Ext.data默认支持Array、JSON、XML等数据格式,可以通过Memory、HTTP、ScriptTag等方式获得这些格式的数据。如果要实现新的协议和新的数据结构,只需要扩展reader和proxy即可。

    DWRProxy就实现了自身的proxy和reader,让EXT可以直接从DWR获得数据. 

    DataProxy:获取想要的数据,通过他能得到来自不同地方的数据,如数组、远程服务器,并组织成不同的格式。 

    DataReader:定义数据项的逻辑结构,一个数据项有很多列,每列的名称是什么,分别是什么数据类型,都由该类来定义。另外,还负责对不同格式的数据进行读取和解析。 

    Store:存储器,用于整合 Proxy 和 Reader,控索取数据时通常和他打交道。 

    1. Ext.data.Connection

    Ext.data.Connection是对Ext.lib.Ajax的封装,它提供了配置使用Ajax的通用方式,它在内部通过Ext.lib.Ajax实现与后台的异步调用。与底层的Ext.lib.Ajax相比,Ext.data.Connection提供了更简洁的配置方式,使用起来更方便。

    Ext.data.Connection主要用于在Ext.data.HttpProxy和Ext.data.ScriptTagProxy中执行与后台交互的任务,它会从指定的URL获得数据,并把后台返回的数据交给HttpProxy或ScriptTagProxy处理。

    ExtJs之所以能异步请求数据,全依赖于Ext.data.Connection.  而ExtAjax只不过是它的一个实例罢了。 

    全  称:Ext.data.Connection
    命名空间:Ext.data
    定义 于:Connection.js
    类  名:Connection
    子  类:Ajax
    父  类:Observable

      这个类封装了到页面所在主机的连接,允许通过一个配置好的URL来请求数据,也可以临时在请求时传递一个URL。

      通过这个类获得的请求都是异步的,并且马上返回,调用request后,它并不马上返回数据,要处理数据,要在调用request时传入的options对象中,配置callback或者是success、failure。这三个是回调函数。其区别将在下文具体交待。当然,你也可以使用Connection的事件处理来做一些事情。

      注意:如果你是要上传文件,你的回调、事件处理函数将不会获得通常意义上的response对象。上传通过IFrame来捕获,所以就没有XMLHttpRequest了。这时,response还是被创建,不过,它的responseText等于IFrame的document.innerHTML,responseXML等于IFrame的document中的xml数据。当然,这个前提是它们存在的时候。


      这意味着必面回一个合法的XML或HTML document。如果返回的是JSON数据,那么建议你把数据放到<textarea>标记中,返回时通过正则表达式从responseText中取出来了。如果返回的是XML数据,建议放到CDATA里面,通过标准DOM方法从responseXMl中取得数据。

      

    2. Ext.data.Record

    Ext.data.Record就是一个设定了内部数据类型的对象,它是Ext.data.Store的最基本组成部分。如果把Ext.data.Store看作是一张二维表,那么它的每一行就对应一个Ext.data.Record实例。

    Ext.data.Record的主要功能是保存数据,并且在内部数据发生改变时记录修改的状态,它还可以保留修改之前的原始值。我们使用Ext.data.Record时通常都是由create()函数开始,首先用create()函数创建一个自定义的Record类型,如下面的代码所示。

    var PersonRecord=Ext.data.Record.create([
      {name:'name',type:'string'},
      {name:'sex',type:'int'}
    ]);

      PersonRecord就是我们定义的新类型,包含字符串类型的name和整数类型的sex两个属性,然后我们使用new关键字创建PersonRecord的实例,如下面的代码所示。

     

    3. Ext.data.Store

    Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件,无论是Grid还是ComboBox,都是通过它实现数据读取、类型转换、排序分页和搜索等操作的.

    Ext.data.Store中有一个Ext.data.Record数组,所有数据都存放在这些Ext.data.Record实例中,为后面的读取和修改操作做准备.

    在使用之前,首先要创建一个Ext.data.Store的实例,如下面的代码所示。

    var data=[['boy',0],['girl',1]];
    var store=newExt.data.Store({
      proxy:newExt.data.MemoryProxy(data),
      reader:newExt.data.ArrayReader({},PersonRecord)
    }); store.load()

    每个store最少需要两个组件的支持,分别是proxy和reader,proxy用于从某个途径读取原始数据,reader用于将原始数据转换成Record实例。

    这里我们使用的是Ext.data.MemoryProxy和Ext.data.ArrayReader,将data数组中的数据转换成对应的几个PersonRecord实例,然后放入store中。store创建完毕之后,执行store.load()实现这个转换过程。

    经过转换之后,store里的数据就可以提供给Grid或ComboBox使用了,这就是Ext.data.Store的最基本用法。
    Ext.data.Store提供了一系列属性和函数,利用它们对数据进行排序操作。
    可以在创建Ext.data.Store时使用sortInfo参数指定排序的字段和排序方式,如下面的代码所示。

     

     4.Ext.data:常用proxy之MemoryProxy、HttpProxy、ScriptTagProxy 

    Ext.data. DataProxy 就是来源这样一种灵感。  

    Ext.data.DataProxy  是获取数据的代理,数据可能来自于内存,可能来自于同一域的远程服务器数据,更有可能来自于不同域的远程服务器数据。  

    但是,在实际应用中,我们不会直接使用  Ext.data.DataProxy,而是使用他的子类: MemoryProxy、HttpProxy 和 ScriptTagProxy,他们的作用分别是: 

     MemoryProxy:获取来自内存的数据,可以是数组、json 或者 xml。 

     HttpProxy:使用 HTTP 协议通过 ajax 从远程服务器获取数据的代理,需要指定 url。 

     ScriptTagProxy:功能和 HttpProxy 一样,但支持跨域获取数据,   是实现时有点偷鸡摸狗。 

     5. Ext.data 常用Reader

     从proxy中读取的数据需要进行解析,这些数据转换成Record数组后才能提供给Ext.data.Store使用。

    6.Ext.data.Store

    实际开发时,并不需要每次都对proxy、reader、store这三个对象进行配置,EXT为我们提供了几种可选择的整合方案。

    A:  SimpleStore = Store + MemoryProxy  + ArrayReader

    var ds=Ext.data.SimpleStore({
        data:[['id1','name1','descn1'],['id2','name2','descn2']],
      fields:['id','name','descn']
    });

    SimpleStore是专为简化读取本地数组而设计的,设置上MemoryProxy需要的data和ArrayReader需要的fields就可以使用了。

    B: JsonStore = Store +HttpProxy + JsonReader

    var ds = Ext.data.JsonStore({
         url: 'xxx.jsp',
         root: 'root',
         fields: ['id', 'name', 'descn']    
    });

    JsonStore将JsonReader和HttpProxy整合在一起,提供了一种从后台读取JSON信息的简便方法,大多数情况下可以考虑直接使用它从后台读取数据.

    C:Ext.data.GroupingStore对数据进行分组

    Ext.data.GroupingStore继承自Ext.data.Store,它的主要功能是可以对内部的数据进行分组,我们可以在创建Ext.data.GroupingStore时指定根据某个字段进行分组,也可以在创建实例后调用它的groupBy()函数对内部数据重新分组,如下面的代码所示。

    var ds=newExt.data.GroupingStore({
        data:[['id1','name1','female','descn1'],['id2','name2','male','descn2'],['id3','name3','female','descn3'],['id4','name4','male','descn4'],['id5','name5','female','descn5']],
        reader:newExt.data.ArrayReader({
            fields:['id','name','sex','descn']
        }),     groupField:
    'sex',
        groupOnSort:true
    });

    上例中,我们使用groupField作为参数,为Ext.data.Grouping设置了分组字段,另外还设置了groupOnSort参数,这个参数可以保证只有在进行分组时才会对Ext.data.Grouping-Store内部的数据进行排序。如果采用默认值,就需要手工指定sortInfo参数,从而指定默认的排序字段和排序方式,否则就会出现错误。
    创建Ext.data.GroupingStore的实例之后,我们还可以调用groupBy()函数重新对数据进行分组。因为我们设置了groupOnSort:true,所以在重新分组时,EXT会使用分组的字段对内部数据进行排序。如果不希望对数据进行分组,也可以调用clearGrouping()函数清除分组信息,如下面的代码所示。
      ds.groupBy('id');ds.clearGrouping();

    7. ExtAjax

    ExtAjax的基本用法如下:

    ExtAjax.request({
         url: '07-01.txt',
         success: function(response){
               Ext.Msg.alert("成功!", response.responseText);
         },
         failure: function(response){
               Ext.Msg.alert("失败!", response.responseText);
         },
         params: { name : 'value'} 
    });        

    这里调用的是Ext.Ajax的request函数,它的参数是一个JSON对象,具体如下所示。qurl参数表示将要访问的后台网址。

    q   success参数表示响应成功后的回调函数。

    上例中我们直接从response取得返回的字符串,用Ext.Msg.alert显示出来。

    q   failure参数表示响应失败后的回调函数。
    注意,这里的响应失败并不是指数据库操作之类的业务性失败,而是指HTTP返回404或500错误,请不要把HTTP响应错误与业务错误混淆在一起。
    q   params参数表示请求时发送到后台的参数,既可以使用JSON对象,也可以直接使用
    "name=value"形式的字符串。
    上面的示例可以在10.store/07-01.html中找到。
    Ext.Ajax直接继承自Ext.data.Connection,不同的是,它是一个单例,不需要用new创建实例,可以直接使用。在使用Ext.data.Connection前需要先创建实例,因为Ext.data.Connection是为了给Ext.data中的各种proxy提供Ajax功能,分配不同的实例更有利于分别管理。Ext.Ajax为用户提供了一个简易的调用接口,实际使用时,可以根据自己的需要进行选择。

    8. Ext.lib.Ajax  更底层的ajax封装

    其实Ext.Ajax和Ext.data.Connection的内部功能实现都是依靠Ext.lib.Ajax来完成的,在Ext.lib.Ajax下面就是各种底层库的Ajax了。
    如果使用Ext.lib.Ajax实现以上的功能,就需要写成下面的形式,如下面的代码所示。

    Ext.lib.Ajax.request(
        'POST',
        '07-01txt',
        {
          success:function(response){
               Ext.Msg.alert('成功',response.responseText);
          },
          failure:function(){
               Ext.Msg.alert('失败',response.responseText);
          }
    },
    'data='+encodeURIComponent(Ext.encode({name:'value'}))
    );

    我们可以看到,使用Ext.lib.Ajax时需要传递4个参数,分别为method、url、callback和params。它们的含义与Ext.Ajax中的参数都是一一对应的,唯一没有提到过的method参数表示请求HTTP的方法,它也可以在Ext.Ajax中使用method:'POST'的方式设置。

    来源: http://wenku.baidu.com/link?url=vA84T-2kDhlUi_DGQ5DOGs2rOCYIrfPmkXxx8rTrWF797QlIPK6m7JpjQIOcimFSwFJO3A8_Yzj97ouFB9_uz-lzS4E5iLj8fi3vCKdy-Q7

  • 相关阅读:
    Spring Cloud Stream
    解决eclipse中git插件中的cannot open git-upload-pack问题
    Unsupported major.minor version 51.0解决办法
    git将本地仓库上传到远程仓库
    Ubuntu下如何安装与运行Redis
    git中进入带有空格的目录下的解决办法
    http://www.111cn.net/jsp/Jsp-Servlet/45158.htm
    MySQL 5.6 for Windows 解压缩版配置安装
    http://blog.csdn.net/congcong68/article/details/39252897
    http://jingyan.baidu.com/article/bad08e1ee14ae409c85121cf.html
  • 原文地址:https://www.cnblogs.com/xiami303/p/3862866.html
Copyright © 2011-2022 走看看