Ext.js - 数据

数据包用于加载和保存应用程序中的所有数据。

数据包有许多类，但最重要的类是 −

• Model
• Store
• Proxy

Model 模型

模型的基类是 Ext.data.Model。它表示应用程序中的一个实体。它将商店数据绑定到视图。它将后端数据对象映射到视图数据索引。数据是在商店的帮助下获取的。

创建模型

要创建模型，我们需要扩展 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 存储

store 的基类是 Ext.data.Store。它包含本地缓存的数据，这些数据将借助模型对象呈现在视图上。Store 使用代理获取数据，代理已定义服务获取后端数据的路径。

Store 数据可以通过两种方式获取 - 静态或动态。

静态 store

对于静态 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" }
   ];
});

动态 store

可以使用代理获取动态数据。我们可以使用代理从 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'  // 根据需求获取或发布类型
      },
      url : 'restUrlPathOrJsonFilePath', // 这里我们必须包含其余的 URL 路径
      // 从存储数据的数据库或 Json 文件路径中获取数据
      reader: {
         type : 'json',  // 获取的数据类型为 JSON 类型
         root : 'data'
      },
   }
});