Record 与 Store 说明

1、Record

  首先需要明确是,ExtJS中有一个名为Record的类,表格等控件中使用的数据是存放在Record对象中,一个Record可以理解为关系数据表中的一行,也可以称为记录。Record对象中即包含了记录(行中各列)的定义信息(也就是该记录包含哪些字段,每一个字段的数据类型等),同时又包含了记录具体的数据信息(也就是各个字段的值)。

  我们来看直接使用Record的代码:

Ext.onReady( function (){
         
var  MyRecord  =  Ext.data.Record.create([
             {name: 'title'},
             {name: 'username', mapping: 'author'},
             {name: 'loginTimes', type: '
int '},
             {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} 
                   ]);
         
var  r = new  MyRecord({
                   title:
" 日志标题 " ,
                   username:
" easyjf " ,
                   loginTimes:
100 ,
                   loginTime:
new  Date()
         });       
         alert(MyRecord.getField(
" username " ).mapping);
         alert(MyRecord.getField(
" lastLoginTime " ).type);
         alert(r.data.username);
         alert(r.get(
" loginTimes " ));
 });

 

 

   首先使用Record的create方法创建一个记录集MyRecord,MyRecord其实是一个类,该类包含了记录集的定义信息,可以通过MyRecord来创建包含字段值的Record对象。在上面的代码中,最后的几条语句用来输出记录集的相关信息,MyRecord.getField("username")可以得到记录中username列的字段信息,r.get("loginTimes")可以得到记录loginTimes字段的值,而r.data.username同样能得到记录集中username字段的值。
  对Record有了一定的了解,那么要操作记录集中的数据就非常简单了,比如r.set(name,value)可以设置记录中某指定字段的值,r. dirty可以得到当前记录是否有字段的值被更改过等等。

2Store

Store可以理解为数据存储器,可以理解为客户端的小型数据表,提供缓存等功能。在ExtJS中,GridPanel、ComboBox、DataView等控件一般直接与Store打交道,直接通过store来获得控件中需要展现的数据等。一个Store包含多个Record,同时Store又包含了数据来源,数据解析器等相关信息,Store通过调用具体的数据解析器(DataReader)来解析指定类型或格式的数据(DataProxy),并转换成记录集的形式保存在Store中,作为其它控件的数据输入。
  数据存储器由Ext.data.Store类定义,一个完整的数据存储器要知道数据源(DataProxy)及数据解析方式(DataReader)才能工作,在Ext.data.Store类中数据源由proxy配置属性定义、数据解析(读取)器由reader配置属性定义,一个较为按部就班创建Store的代码如下:

var MyRecord = Ext.data.Record.create([
 
               {name: 'title'}, 
  
 
               {name: 'username', mapping: 'author'}, 
  
 
               {name: 'loginTimes', type: 'int'}, 
  
 
               {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}  
  
 
                     ]); 
  
 
           var dataProxy=new Ext.data.HttpProxy({url:"link.ejf"}); 
  
 
           var theReader=new Ext.data.JsonReader({ 
  
 
               totalProperty: "results",  
  
 
               root: "rows",               
  
 
               id: "id"                    
  
 
                     },MyRecord); 
  
 
           var store=new Ext.data.Store({            
  
 
                               proxy:dataProxy, 
  
 
                               reader:theReader 
  
 
                     }); 
  
 
           store.load(); 
  
 
 

  当然,这样的难免代码较多,Store中本身提供了一些快捷创建Store的方式,比如上面的示例代码中可以不用先创建一个HttpProxy,只需要在创建Store的时候指定一个url配置参数,就会自动使用HttpProxy来加载参数。比如,上面的代码可以简化成:

 

var MyRecord = Ext.data.Record.create([
 
               {name: 'title'}, 
  
 
               {name: 'username', mapping: 'author'}, 
  
 
               {name: 'loginTimes', type: 'int'}, 
  
 
               {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}  
  
 
                     ]); 
  
 
           var theReader=new Ext.data.JsonReader({ 
  
 
               totalProperty: "results",  
  
 
               root: "rows",               
  
 
               id: "id"                    
  
 
                     },MyRecord); 
  
 
           var store=new Ext.data.Store({ 
  
 
           url:"link.ejf", 
  
 
                               proxy:dataProxy, 
  
 
                               reader:theReader 
  
 
                     }); 
  
 
           store.load(); 
  
 
 

  虽然不再需要手动创建HttpProxy了,但是仍然需要创建DataReader等,毕竟还是复杂,ExtJS进一步把这种常用的数据存储器进行了封装,在Store类的基础上提供了SimpleStore、SimpleStore、GroupingStore等,直接使用SimpleStore,则上面的代码可以进一步简化成下面的内容:

var store=new Ext.data.JSonStore({              
 
                     url:"link.ejf?cmd=list", 
  
 
                     totalProperty: "results",  
  
 
                     root: "rows", 
  
 
                     fields:['title',   {name: 'username', mapping: 'author'}, 
  
 
               {name: 'loginTimes', type: 'int'}, 
  
 
               {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}  
  
 
                     ]          
  
 
           }); 
  
 
           store.load(); 
  
 
 

 

3DataReader

DataReader表示数据读取器,也就是数据解析器,其负责把从服务器或者内存数组、xml文档中获得的杂乱信息转换成ExtJS中的记录集Record数据对象,并存储到Store里面的记录集数组中。
  数据解析器的基类由Ext.data.DataReader定义,其它具体的数据解析器都是该类的子类,ExtJS中提供了读取二维数组、JSon数据及Xml文档的三种数据解析器,分别用于把内存中的二级数组、JSON格式的数据及XML文档信息解析成记录集。下面简单的介绍:
  1)ArrayReader
Ext.data.ArrayReader-数组解析器,用于读取二维数组中的信息,并转换成记录集Record对象。首先看下面的代码:

var MyRecord = Ext.data.Record.create([
 
               {name: 'title', mapping:1}, 
  
 
               {name: 'username', mapping:2}, 
  
 
               {name: 'loginTimes', type:3}  
  
 
                     ]); 
  
 
           var myReader = new Ext.data.ArrayReader({ 
  
 
               id: 0            
  
 
           }, MyRecord); 
  
 
 

  这里定义的myReader可以读取下面的二维数组:

[ [1, '测试', '小王',3], [2, '新年好', 'williamraym',13] ]
 
 

  2JsonReader
  Ext.data.JsonReaderJson数据解析器,用于读取JSON格式的数据信息,并转换成记录集Record对象。看下面使用JsonReader的代码:

var MyRecord = Ext.data.Record.create([
 
               {name: 'title'}, 
  
 
               {name: 'username', mapping: 'author'}, 
  
 
               {name: 'loginTimes', type: 'int'} 
  
 
                     ]); 
  
 
           var myReader = new Ext.data.JsonReader({ 
  
 
                     totalProperty: "results",  
  
 
           root: "rows",        
  
 
            id: "id"  
  
 
           }, MyRecord); 
  
 
 

  这里的JsonReader可以解析下面的JSON数据:

{ 'results': 2, 'rows': [
 
      { id: 1, title: '测试', author: '小王', loginTimes: 3 }, 
  
 
      { id: 2, title: 'Ben', author: 'williamraym', loginTimes:13} ] 
  
 
  } 
  
 
 

  JSonReader还有比较特殊的用法,就是可以把Store中记录集的配置信息存放直接保存在从服务器端返回的JSON数据中,比如下面的例子:

var myReader = new Ext.data.JsonReader();
 
 

 

  这一个不带任何参数的myReader,可以处理从服务器端返回的下面JSON数据:

{
 
   'metaData': { 
  
 
      totalProperty: 'results', 
  
 
      root: 'rows', 
  
 
      id: 'id', 
  
 
      fields: [ 
  
 
         {name: 'title'}, 
  
 
               {name: 'username', mapping: 'author'}, 
  
 
           {name: 'loginTimes', type: 'int'} ] 
  
 
     }, 
  
 
   'results': 2, 'rows': [ 
  
 
      { id: 1, title: '测试', author: '小王', loginTimes: 3 }, 
  
 
      { id: 2, title: '新年好', author: 'williamraym', loginTimes:13}] 
  
 
  } 
  
 
 

  3)XmlReader
  Ext.data.XmlReader-XML文档数据解析器,用于把XML文档数据转换成记录集Record对象。看下面的代码:

var MyRecord = Ext.data.Record.create([
 
               {name: 'title'}, 
  
 
               {name: 'username', mapping: 'author'}, 
  
 
               {name: 'loginTimes', type: 'int'} 
  
 
                     ]); 
  
 
           var myReader = new Ext.data.XmlReader({ 
  
 
                     totalRecords: "results",  
  
 
           record: "rows",        
  
 
                      id: "id"  
  
 
           }, MyRecord); 
  
 
 

  上面的myReader能够解析下面的xml文档信息:

<topics>  <results>2</results>  <row>    <id>1</id>    <title> 测试</ title >    <author>小王</ author >  <loginTimes>3</ loginTimes >  </row>  <row>    <id>2</id>    <title>新年好</ title >    <author> williamraym </ author >  <loginTimes>13</ loginTimes >  </row> </topics>
 
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值