1. WIKI教程
2. 学习ExtJS
3. Ext.js - Data

Ext.js - 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 。 它包含本地缓存的数据，这些数据将在模型对象的帮助下在视图上呈现。 存储使用代理获取数据，代理具有为服务定义的路径以获取后端数据。

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

静态商店

对于静态存储，我们将存储存储中的所有数据，如以下代码所示。

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服务处理来自远程服务器的数据。

Defining proxies in the server

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