Ext.js - 数据

Ext.js数据 - 从简单和简单的步骤学习ExtJS，从基本到高级概念，包括概述，环境设置，命名约定，架构，编写第一个Ext JS程序，OOPS概念，Dom操作，自定义事件和监听器，容器和布局，GUI控件（xType），UI组件，调试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相同，并且映射应该与数据匹配，无论是静态的还是动态的数据库，使用商店获取.

商店

商店的基类是 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获取数据的代理.

代理

代理的基类是Ext.data.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'      },   }});