ExtJS RecordとStoreの説明

11376 ワード

ExtJS RecordとStoreの説明
転載:http://www.blogjava.net/liubijin/archive/2010/05/04/320008.html 1、Recordは、まず明確にする必要があります.ExtJSにRecordというクラスがあります.テーブルなどのコントロールで使用されるデータはRecordオブジェクトに格納されています.一つのレコードは関係データテーブルの一行として理解できます.記録とも言えます.Recordオブジェクトには、レコード(行の各列)の定義情報(つまり、どのフィールド、各フィールドのデータタイプなどを含むレコード)が含まれており、具体的なデータ情報(つまり、各フィールドの値)が記録されている.直接レコードを使うコードを見てみます.
Ext.onReady(
機能
(){
var
MyRecord
を選択します.
Ext.data.Record.creat([             {name: 'title'             {name: 'username mapping: 'author｝             {name: 'logiinTimes'は、タイプ: '
要点
'             {name: 'lastLoging Time'は、 mapping: 'ロゴタイムタイプ: 'date                    ]);
var
r
を選択します.
new
MyRecord({                   title:
「
ログタイトル
「
を選択します.                   username:
「
easyjf
「
を選択します.                   ロゴTimes:
100
を選択します.                   ロゴタイム:
new
Date()         });                 alert(MyRecord.get Field(
「
username
「
)mapping         alert(MyRecord.get Field(
「
lastLoging Time
「
)type;         alert(r.data.username);         alert(r.get(
「
ロゴTimes
「
)［形 });
　　まずRecordのcreate方法を使用して、レコードセットMyRecordを作成します.MyRecordは、レコードセットの定義情報を含んでいます.MyRecordを通じてフィールド値を含むRecordオブジェクトを作成できます.上のコードの中で、最後のいくつかの文がレコードセットの関連情報を出力します.MyRecords.getField(「username」)記録中のusername列のフィールド情報を得ることができます.r.get(「logiinTimes」)は、loginTimesフィールドの値を記録することができます.r.data.usernameも、集中的なusernameフィールドの値を記録することができます.Recordについてある程度知っています.記録セットのデータを操作するのは非常に簡単です.r.set(name,value)レコードに指定されたフィールドの値を設定することができます.r.dirtyは、現在のレコードにフィールドの値が変更されたかどうかなどを得ることができます.2、Store Storeは、データメモリとして理解できます.クライアントの小型データテーブルとして認識し、キャッシュなどの機能を提供します.ExtJSでは、GridPanel、Commbox、DataViewなどのコントロールは、Storeと直接に接触し、storeを通じて取得します.コントロールには表示するデータなどが必要です.一つのStoreには複数のRecordが含まれています.また、Storeにはデータソースやデータ解析器などの関連情報が含まれています.Storeは特定のデータ解析器(Data Reader)を呼び出して、指定されたタイプやフォーマットのデータ(DataProxy)を解析します.データメモリはExt.data.Storeで定義され、データソース(DataProxy)とデータ解析方式(Data Reader)が動作し、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では、上記の例のコードの中で、まず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を作成する必要はなくなりましたが、Data Readerなどを作成する必要があります.やはり複雑です.ExtJSはさらにこのような一般的なデータメモリをカプセル化しました.Store類に加えて、SimpleStore、SimpleStoreなどを提供しました.直接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で2次元配列、JSonデータ、Xml文書を読み取る3つのデータ解析器を提供しています.メモリ内の2次配列、JSON形式のデータ、XML文書情報を記録セットに解析します.以下の簡単な紹介は、1)ArayReader Ext.data.ArayReader-配列解析器を使用して、2次元配列の情報を読み取り、記録します.レコードオブジェクトを記録します.まず次のコードを見ます.

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は、次の2次元配列を読み取ることができる.

[ [1, '  ', '  ',3], [2, '   ', 'williamraym',13] ]

2)Json Reader Ext.data.Json Reader-Jsonデータ解析器は、JSON形式のデータ情報を読み取り、記録集Recordオブジェクトに変換します.以下のコードを参照してください.

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

ここのJson Readerは以下の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)Xml Reader Ext.data.Xml Reader-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>

ES 6の再学習は遅かれ早かれ返却します.