ExtJS Record 与 Store 说明

cader

浏览: 3285 次
来自: 北京

最近访客更多访客>>

summer85

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

原文见：http://www.blogjava.net/liubijin/archive/2010/05/04/320008.html

１、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可以得到当前记录是否有字段的值被更改过等等。

2 、 Store

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();

3 、 DataReader

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] ]

　　 2 ） JsonReader
　　 Ext.data.JsonReader － Json 数据解析器，用于读取 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>

分享到：