Ext.js - 資料

Data 包用於載入和儲存應用程式中的所有資料。

Data 包包含許多類，但最重要的類是：

• 模型 (Model)
• 儲存 (Store)
• 代理 (Proxy)

模型 (Model)

模型的基類是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來獲取。

儲存 (Store)

儲存的基類是Ext.data.Store。它包含本地快取的資料，這些資料將藉助模型物件呈現到檢視上。Store 使用代理獲取資料，代理定義了用於獲取後端資料的服務的路徑。

儲存資料可以透過兩種方式獲取 - 靜態或動態。

靜態儲存

對於靜態儲存，我們將所有資料都儲存在儲存中，如下面的程式碼所示。

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中獲取資料。

代理 (Proxy)

代理的基類是Ext.data.proxy.Proxy。模型和儲存使用代理來處理模型資料的載入和儲存。

代理有兩種型別

• 客戶端代理
• 伺服器代理

客戶端代理

客戶端代理包括使用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'
      },
   }
});