Ext.js 數(shù)據(jù)

數(shù)據(jù)包用于加載和保存應(yīng)用程序中的所有數(shù)據(jù)。

數(shù)據(jù)包有許多類，但最重要的類是:

1. 模態(tài)
2. 商店
3. 代理

模型

modal的基類是Ext.data.Model.It表示應(yīng)用程序中的一個(gè)實(shí)體。 它將存儲(chǔ)數(shù)據(jù)綁定到視圖。 它有后端數(shù)據(jù)對象到視圖dataIndex的映射。 在store的幫助下獲取數(shù)據(jù)。

創(chuàng)建模型

為了創(chuàng)建一個(gè)模型，我們需要擴(kuò)展Ext.data.Model類，我們需要定義字段的名稱和映射。

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

這里的名稱應(yīng)該與我們在視圖中聲明的dataIndex相同，并且映射應(yīng)該匹配使用store從數(shù)據(jù)庫獲取的靜態(tài)或動(dòng)態(tài)數(shù)據(jù)。

商店

store的基類是Ext.data.Store。 它包含本地緩存的數(shù)據(jù)，該數(shù)據(jù)將在模型對象的幫助下在視圖上呈現(xiàn)。 存儲(chǔ)使用代理獲取數(shù)據(jù)，代理具有為服務(wù)定義的路徑以獲取后端數(shù)據(jù)。

存儲(chǔ)數(shù)據(jù)可以從靜態(tài)或動(dòng)態(tài)兩種方式獲取。

靜態(tài)存儲(chǔ)

對于靜態(tài)存儲(chǔ)，我們將存儲(chǔ)在存儲(chǔ)中的所有數(shù)據(jù)如下:

   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" }
      ];
   });

動(dòng)態(tài)存儲(chǔ)

可以使用代理獲取動(dòng)態(tài)數(shù)據(jù)。 我們可以讓代理可以從Ajax，Rest和Json獲取數(shù)據(jù)。

代理

代理的基類是Ext.data.proxy.Proxy。 代理由模型和商店用于處理模型數(shù)據(jù)的加載和保存。

有兩種類型的代理:

1. 客戶端代理
2. 服務(wù)器代理

客戶端代理

客戶端代理包括使用HTML5本地存儲(chǔ)的內(nèi)存和本地存儲(chǔ)。

服務(wù)器代理

服務(wù)器代理使用Ajax，Json數(shù)據(jù)和Rest服務(wù)處理來自遠(yuǎn)程服務(wù)器的數(shù)據(jù)。

定義服務(wù)器中的代理：

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'
      },
   }
});