Ext.js-データ

データパッケージは、アプリケーション内のすべてのデータをロードおよび保存するために使用されます。

データパッケージには多数のクラスがありますが、最も重要なクラスは次のとおりです-

モデル
格納
プロキシ

モデル

モデルの基本クラスは Ext.data.Model です。アプリケーション内のエンティティを表します。表示するストアデータをバインドします。バックエンドデータオブジェクトのビューdataIndexへのマッピングがあります。データは、ストアを使用して取得されます。

モデルを作成する

モデルを作成するには、Ext.data.Modelクラスを拡張し、フィールド、名前、マッピングを定義する必要があります。

Ext.define('StudentDataModel', {
   extend: 'Ext.data.Model',
   fields: [
      {name: 'name', mapping : 'name'},
      {name: 'age', mapping : 'age'},
      {name: 'marks', mapping : 'marks'}
   ]
});

ここで、名前はビューで宣言するdataIndexと同じである必要があり、マッピングは、storeを使用してフェッチされるデータベースからの静的または動的なデータと一致する必要があります。

格納

ストアの基本クラスは Ext.data.Store です。これには、ローカルにキャッシュされたデータが含まれており、モデルオブジェクトの助けを借りてビューにレンダリングされます。ストアは、プロキシを使用してデータを取得します。プロキシには、バックエンドデータを取得するサービス用に定義されたパスがあります。

ストアデータは、静的または動的の2つの方法で取得できます。

静的ストア

静的ストアの場合、次のコードに示すように、すべてのデータがストアに存在します。

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   data: [
      { name : "Asha", age : "16", marks : "90" },
      { name : "Vinit", age : "18", marks : "95" },
      { name : "Anand", age : "20", marks : "68" },
      { name : "Niharika", age : "21", marks : "86" },
      { name : "Manali", age : "22", marks : "57" }
   ];
});

ダイナミックストア

プロキシを使用して動的データを取得できます。 Ajax、Rest、Jsonからデータを取得できるプロキシを使用できます。

プロキシ

プロキシの基本クラスはExt.data.proxy.Proxyです。モデルデータの読み込みと保存を処理するために、モデルとストアがプロキシを使用します。

プロキシには2つのタイプがあります

クライアントプロキシ
サーバープロキシ

クライアントプロキシ

クライアントプロキシには、HTML5ローカルストレージを使用したメモリとローカルストレージが含まれます。

サーバープロキシ

サーバープロキシは、Ajax、Jsonデータ、Restサービスを使用して、リモートサーバーからのデータを処理します。

サーバーでのプロキシの定義

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   proxy : {
      type : 'rest',
      actionMethods : {
         read : 'POST' //Get or Post type based on requirement
      },
      url : 'restUrlPathOrJsonFilePath',//here we have to include the rest URL path
     //which fetches data from database or Json file path where the data is stored
      reader: {
         type : 'json', //the type of data which is fetched is of JSON type
         root : 'data'
      },
   }
});

Extjs-data

目次